TIL-68 Javascriptエスケープとドラッグ&ドロップ


ジャンプ


連続呼び出しの関数の最後(または最初)のみが呼び出されます.
代表的なajax検索でよく使われます.
<input id="input" />

document.querySelector('#input').addEventListener('input', function(e) {
  console.log('ajax 요청', e.target.value);
});
たとえば、このような論理があると言ったら、コンソールが1つずつ見えます.その言葉の意味は、押すたびに通信を要求することです.このような場合、不要なサーバコストが発生します.その時は滴丸でいいです.
let timer;
document.querySelector('#input').addEventListener('input', function(e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('ajax 요청', e.target.value);
  }, 200);
});
200ミリ秒以内に入力がない場合は、入力として終了します.

書き込み(Throttling)


最後の関数を呼び出してからしばらくしてから再度呼び出さないでください.
回転は通常、上下にスクロールするために使用されます.
上下にスクロールすると、スクロールイベントが多く発生します.
数秒に1回、または数ミリ秒に1回の実行を制限するだけです.
let timer;
document.querySelector('#input').addEventListener('input', function (e) {
  if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      console.log('ajax 요청', e.target.value);
    }, 200);
  }
});
ソース:https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa