jQueryイベント発生の重複を防ぐ小技

イベントの重複
Blowing underwater circles / Christian Haugen

マウスオーバーでささっと要素の上を動かしたり、連打して処理が重複する場合の対処法です。

手順は以下のようになります。コードも短く、意外と簡単です。

  • 最初のイベントが発生
  • 処理を一度だけ実行
  • 次のイベントを0.5秒間無効にする

var busy = 0;
$('div').on('mouseover click', function() {
  if (busy == 1) return false;
  
  // 処理開始
  $(this).append('●');
  // 処理終了 */

  // 次のイベントを0.5秒間無効
  busy = 1;
  setTimeout(function() { busy = 0; }, 500);
});

mouseoverとclickのイベントを同時に指定している場合、iOSでは問題ないのに、Androidでは両方のイベントが発生したとみなすのでカッとなって対処法を書き残しました。

※jQuery v1.7より下の場合は、.onが動作しないので.bindに変える必要があります。