弾き返しと弾き返し

32509 ワード
返品 ドラッグネット テキストリンク

使用する理由


スクロール、サイズ変更、入力、mouseoverなどのイベントは短時間で複数回発生し、パフォーマンスの問題を引き起こす可能性があります.discountsおよびthrottleは、短時間間隔で連続的に発生するイベントをグループ化することによって、過剰なイベント呼び出しを阻止する.

サンプルコードの設定


簡単な例でその働き方を理解しましょう.一般クリック、後退クリック、手書きクリックを使用して区別し、クリック数に応じて変化を表示します.
フレームワークコードは次のとおりです.
<!DOCTYPE html>
<html>
  <body>
    <button>click</button>
    <div>
      <pre>일반 클릭: <span class="normal">0</span></pre>
      <pre>디바운스 클릭: <span class="debounce">0</span></pre>
      <pre>스로틀 클릭: <span class="throttle">0</span></pre>
    </div>
    <script>
      const $button = document.querySelector("button");
      const $normal = document.querySelector(".normal");
      const $debounce = document.querySelector(".debounce");
      const $throttle = document.querySelector(".throttle");

      $button.addEventListener("click", () => {
        $normal.textContent = Number($normal.textContent) + 1;
        console.log('normal');
      });
      
    </script>
  </body>
</html>
現在は通常クリックのカウントのみが行われています.

返品


disbounceは、短時間で発生したイベントをグループ化し、イベントハンドラが最後のイベントのみを呼び出すようにします.すなわち、イベントが連続的に発生すると、デバッガはイベントハンドラを呼び出さず、一定期間イベントが発生しない場合、イベントハンドラを呼び出す.
<!DOCTYPE html>
<html>
  <body>
    <button>click</button>
    <div>
      <pre>일반 클릭: <span class="normal">0</span></pre>
      <pre>디바운스 클릭: <span class="debounce">0</span></pre>
      <pre>스로틀 클릭: <span class="throttle">0</span></pre>
    </div>
    <script>
      const $button = document.querySelector("button");
      const $normal = document.querySelector(".normal");
      const $debounce = document.querySelector(".debounce");
      const $throttle = document.querySelector(".throttle");

      const debounce = (callback, delay) => {
        let timerId;

        //timerId를 기억하는 클로져를 반환한다.
        return (e) => {
          //delay가 끝나기전 다시 호출 되었을 경우, 타이머를 취소하고 새로운 타이머를 설정한다.
          //delay가 끝날때까지 호출이 되지 않으면 callback함수를 실행한다.
          if (timerId) clearTimeout(timerId);
          timerId = setTimeout(callback, delay, 'debounce 실행');
        };
      };

      $button.addEventListener("click", () => {
        $normal.textContent = Number($normal.textContent) + 1;
        console.log('normal');
      });

      //debounce 함수가 반환하는 클로져를 이벤트 핸들러로 등록한다.
      $button.addEventListener("click", debounce((message)=>{
        $debounce.textContent = Number($debounce.textContent) + 1;
        console.log(message);
      },500));
      
    </script>
  </body>
</html>
Debonse関数から返されるカーネルをイベントハンドルとして登録します.これは,モジュールの特性を利用して,イベントが複数回呼び出されたときに以前のtimerIdを記憶するためである.イベントが呼び出されたときに前のtimerIdが存在するかどうかを判断した場合は、タイマを削除し、新しいタイマを設定します.ない場合は、新しいタイマーのみを設定します.delayに設定された時間内にdebonse関数が呼び出されない場合はcallbabk関数が呼び出されます.実行結果は次のとおりです.

resizeイベントの処理、入力に応じてajaxリクエストの自動完了、ボタンの重複クリックの防止などに使用できます.

斜紋布


Throtlingは、イベントハンドラを一定期間呼び出すために、短時間でイベントをグループ化する.ハーモニーを見て!長いようですが、変わった部分は多くありません.throttle関数と呼び出しの部分が追加されました.
<!DOCTYPE html>
<html>
  <body>
    <button>click</button>
    <div>
      <pre>일반 클릭: <span class="normal">0</span></pre>
      <pre>디바운스 클릭: <span class="debounce">0</span></pre>
      <pre>스로틀 클릭: <span class="throttle">0</span></pre>
    </div>
    <script>
      const $button = document.querySelector("button");
      const $normal = document.querySelector(".normal");
      const $debounce = document.querySelector(".debounce");
      const $throttle = document.querySelector(".throttle");

      const debounce = (callback, delay) => {
        let timerId;

        //timerId를 기억하는 클로져를 반환한다.
        return (e) => {
          //delay가 끝나기전 다시 호출 되었을 경우, 타이머를 취소하고 새로운 타이머를 설정한다.
          //delay가 끝날때까지 호출이 되지 않으면 callback함수를 실행한다.
          if (timerId) clearTimeout(timerId);
          timerId = setTimeout(callback, delay, 'debounce 실행');
        };
      };


      const throttle = (callback, delay) => {
        let timerId;

        //timerId를 기억하는 클로져를 반환한다.
        return (e) => {
          //delay가 끝나기전 다시 호출 되었을 경우, 아무일도 하지않는다.
          //delay가 지나면 callback함수를 실행하고 timerId를 null로 만들어 새로운 타이머를 설정할 수 있도록 한다.
          if(timerId) return;
          timerId = setTimeout((message)=>{
              callback(message);
              timerId= null;
          }, delay, 'throttle 실행')
        }
      }


      $button.addEventListener("click", () => {
        $normal.textContent = Number($normal.textContent) + 1;
        console.log('normal')
      });

      //debounce 함수가 반환하는 클로져를 이벤트 핸들러로 등록한다.
      $button.addEventListener("click", debounce((message)=>{
        $debounce.textContent = Number($debounce.textContent) + 1;
        console.log(message);
      },500));
      
      //throttle 함수가 반환하는 클로져를 이벤트 핸들러로 등록한다.
      $button.addEventListener("click", throttle((message)=>{
        $throttle.textContent = Number($throttle.textContent) + 1;
        console.log(message);
      },500))
    </script>
  </body>
</html>
リバウンドと方式の差は多くない.以前のtimerIdを覚えるために、閉パッケージを返しました.CloserではtimerIdが存在する場合はclearではなく何もしません.次にsettimeOutの実行部でdelayの後にコールバックを実行し、timerIdを空にします.これにより、関数が再実行されると、タイマが再設定されます.これにより、コールバックは最終的に設定された遅延間隔で呼び出されます.実行結果は次のとおりです.

回転は、スクロールイベント処理や無限スクロールなどに使用できます.
Command Pattern
Linux鳥哥私房菜学習ノート_第八章Linuxディスクとファイルシステム管理