jQueryでスクロール終了後に一度だけ処理を実行する

題名の通りです。

let id = false;//初期値

$(window).on("scroll touchmove",function(){
  console.log("スクロール発生");//・・・①

  if(id) clearTimeout(id);//・・・②

　//2秒後に実行
  id = setTimeout(function(){//・・・③
    console.log("2秒後経過したので実行");//・・・④
  },2000);

});

処理の流れ

1. idの初期値をfalseに設定
2. スクロールを検知したら①を実行
3. idはまだfalseなので②は実行されない
4. ③が実行（2秒後に実行されるタイマーがセットされると同時に、idにNumber型の整数値が代入される）
5. 2秒経過しないうちにスクロールが発生した場合、①が実行→idはfalseではないので②が実行
6. ③が実行・・・2秒後に実行されるタイマーがセットされる→idにNumber型の整数値が代入される
7. 2秒経過するまでスクロールが発生しなければ、④が出力

なぜclearTimeoutするのか？

スクロールするたびにsetTimeoutのイベントが登録され、実行されてしまうから

clearTimeoutがない場合のコードは以下のようになります。

let id = false;
$(window).on("scroll touchmove",function(){
 console.log("スクロール発生");
/*if(id) {
  console.log('aaa');
  clearTimeout(id);
  } */
  id = setTimeout(function(){
    console.log("タイマー終了後");//・・・④
  },2000);
});

例えば、ちょっとスクロールしただけも以下のように④が6回も実行されてしまいます。

これはあまりよくないので、clearTimeourでタイマーをリセットしてあげなければいけないということです。