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

ここで、同じイベントが迅速かつ繰り返しトリガーされるのを防ぐための jQuery メソッドを共有します。非常に良い参考値となっておりますので、皆様のお役に立てれば幸いです。

反復トリガーは、ユーザーがデータを送信するために繰り返しクリックすることを防ぐためのもので、通常、クリック後に応答がない場合は再度クリックする必要があります。これは、ユーザー エクスペリエンスの観点からだけでなく、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>

上記は私がまとめたものです。 今後、皆様のお役に立てれば幸いです。

関連記事:

vue2.0.jsを使用してマルチレベル連携セレクターを実装

mint-uiを使用して州と市の3レベル連携効果を実現

vueを使用して二次ルート設定方法

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