同じイベントが繰り返しトリガーされるのを防ぐ方法

今回は、同じイベントが繰り返し発生しないようにする方法と、同じイベントが繰り返し発生しないようにするための注意事項

を紹介します。実際のケースを見てみましょう。

反復トリガーは、ユーザーがデータを送信するために繰り返しクリックすることを防ぐためのもので、通常、クリック後に応答がない場合は再度クリックする必要があります。これは、ユーザー エクスペリエンスの観点からだけでなく、js または php プログラム スクリプトでも実行する必要があります。クリックがサーバーに送信され、処理されていることがわかったら、この繰り返しトリガーの問題に対処するスクリプトを整理します。

多くの場合、クリックなどのイベントが素早く繰り返しトリガーされ、コードが 2 回実行され、多くの結果が生じます。現在、多くの解決策がありますが、ほとんどすべてに制限があります。たとえば、Ajax フォームで、ユーザーが一度に複数回クリックできないようにする場合、送信ボタンを初めてクリックしたときにボタンを固定し、その後ボタンを解放することができます。再度クリックすることは許可されます。多くの人がこれを行っていますが、他の状況ではあまりうまく機能しません。

まず、関数をスローすることをお勧めします。

var _timer = {}; 
function delay_till_last(id, fn, wait) { 
 if (_timer[id]) { 
  window.clearTimeout(_timer[id]); 
  delete _timer[id]; 
 } 
 return _timer[id] = window.setTimeout(function() { 
  fn(); 
  delete _timer[id]; 
 }, wait); 
}

使い方

$dom.on('click', function() { 
 delay_till_last('id', function() {//注意 id 是唯一的 
  //响应事件 
 }, 300); 
});

上記のコードは、クリック後300ミリ秒待機することができ、300ミリ秒以内に再度イベントが発生すると、最後のクリックがキャンセルされ、時間がリセットされます。待機が完了するまで 300 ミリ秒待ってからイベントに応答します。

この機能は、入力されたメールアドレスに基づいて入力を確認したり、フォーカスが外れるまで待つことなくリアルタイムでアバターを描画したりするなど、非常に便利です。

例

ボタン BUTTON クラス

a ラベルクラス

最初のタイプの状況では、ボタンには、クリックできるかどうかを制御するために無効な属性があります。コードを参照してください

<input type="button" value="Click" id="subBtn"/> 
<script type="text/javascript"> 
function myFunc(){ 
 //code 
 //执行某段代码后可选择移除disabled属性，让button可以再次被点击 
 $("#subBtn").removeAttr("disabled"); 
} 
$("#subBtn").click(function(){ 
 //让button无法再次点击 
 $(this).attr("disabled","disabled"); 
 //执行其它代码，比如提交事件等 
 myFunc(); 
}); 
</script>

。

あなたはこの記事を読んだはずです。あなたはケースメソッドをマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

画像カルーセル効果を実現する方法

時間制限付き非表示ダイアログボックスを実装するjQueryメソッド

🎜

以上が同じイベントが繰り返しトリガーされるのを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。