JavaScript のスロットルとデバウンス: 初心者ガイド-jsチュートリアル-php.cn

JavaScript のスロットルとデバウンス: 初心者ガイド

王林

リリース： 2024-09-07 06:32:09

オリジナル

606 人が閲覧しました

Throttling & Debouncing in JavaScript: A Beginner

JavaScript を使用する場合、過剰なイベントトリガーによりアプリケーションの速度が低下する可能性があります。たとえば、ユーザーがブラウザウィンドウのサイズを変更したり、検索バーに入力したりすると、イベントが短期間に繰り返し発生し、アプリのパフォーマンスに影響を与える可能性があります。

ここで、スロットルとデバウンスが役に立ちます。これらは、頻繁に発生するイベントを処理するときに関数が呼び出される頻度を管理するのに役立ちます。

?スロットリングとは何ですか?

スロットルは、関数を実行できる頻度を制限します。イベントが繰り返し発生した場合でも、調整された関数は指定された時間間隔ごとに最大 1 回しか実行されません。

例:

あなたがコンサートに行って写真を撮っていると想像してみてください。ただし、(パフォーマンスがどんなに盛り上がっていても) 写真を撮るのは 5 分に 1 枚だけと決めます。それはスロットルのようなものです。写真にふさわしい瞬間がどれだけ起こっても、5 分に 1 枚の写真を撮るというルールを守ります。

JavaScript では、これは、ユーザーがページを下にスクロールする頻度を追跡したいが、ミリ秒ごとに関数をトリガーしたくない場合に適用できます。スロットルを使用すると、その関数が実行される頻度を制御できます。

コード例:

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

ログイン後にコピー

この例では、ユーザーがスクロールする速度や頻度に関係なく、handleScroll 関数は 2 秒 (2000 ミリ秒) に 1 回だけ実行されます。

?デバウンスとは何ですか?

デバウンスにより、一定期間非アクティブな状態が続いた場合にのみ関数が呼び出されるようになります。イベントが発生し続ける場合、関数はタイマーをリセットし続け、イベントが停止した後にのみトリガーします。

例:

グループチャットに参加していて、メッセージを入力していると想像してください。キーを押すたびに友達に通知を送信したくないでしょう。代わりに、入力を停止するまで数秒待ってから、「入力中...」通知を送信します。これはデバウンスです。入力を一時停止した後にのみ通知を送信します。

JavaScript では、ユーザーが検索ボックスに入力するときにデバウンスがよく使用されます。キーストロークのたびに検索クエリを送信する代わりに、ユーザーが入力を止めるまでしばらく待ってから検索を実行できます。

コード例:

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

ログイン後にコピー

この例では、handleInput 関数は、ユーザーが 500 ミリ秒間入力を停止した後にのみ実行されます。