節流-理解、実践と実現

絞り(分流)は、振れ防止(振れ除去)の実現原理に似ている.本文は主に節流、鏡像文章を討論する:振れ防止-理解、実践と実現.防震と節流を別々に議論するのは、節流防震をよく知らない読者が的確に把握できるようにするためだ.コードでスロットルを実現する方法もポイントです.本稿では,逐次漸進的に,まず1つのケースのフローチャートを描き,フローチャートの論理に基づいてスロットル機能コードを記述する.
記事には複数のインタラクティブなケースが含まれており、ブログの原文でリアルタイムでケースを表示できます.
ブログの購読も歓迎します

スロットルケース

実行事例をクリック
マウスが移動するとmousemoveイベントが頻繁にトリガーされます.上は非スロットルモードで、mousemoveトリガのたびに円点が描画されます.下はスロットルモードで、mosuemoveはマウスの移動時に複数回トリガーされますが、一定時間間隔でのみ円点が描画されます.

スロットルの理解と実現

上記の例では、頻繁にトリガーされるイベント、イベント処理関数は一定の時間間隔で1回のみ実行されるスロットルの役割を基本的に理解できます.
しかし、スロットル関数はどのようにしてできますか?上記の例を例に、フローチャートを以下に示します.
コアパラメータ:

間隔時間

タイマー

フローチャートの考え方に基づいて、分流関数を実現する:

function throttle( func, wait ) {
  let timer

  function throttled( ...args ) {
    const self = this

    if ( timer == null ) {
      invokeFunc()
      addTimer()
    }

    function addTimer() {
      timer = setTimeout( () => {
        clearTimer()
      }, wait )
    }

    function invokeFunc() {
      func.apply( self, args )
    }
  }

  return throttled

  function clearTimer() {
    clearTimeout( timer )
    timer = null
  }
}

次に,作成したスロットル関数を用いて上の例を実現する.
実行事例をクリック

シーンの適用

無限のスクロールバー
実行事例をクリック

まとめ

スロットルと振れ防止は同様で、システムのパフォーマンスを効果的に最適化できますが、ビジネスシーンでは異なります.

ブレ止めは、テキストボックスに文字を1つずつ入力するなど、複数回トリガーされるイベントにも、頻繁にトリガーされるイベント(ウィンドウサイズの調整など)にも使用できます.

スロットルは、スクロールバーなどの頻繁にトリガーされるイベントにのみ使用されることが多い.

この文章を読むのに時間をかけてくれてありがとう.もしあなたがこの文章が好きなら、いいねを歓迎して、コレクションして分かち合って、もっと多くの人にこの文章を見せて、これも私に対する最大の励ましと支持です!ブログの購読も歓迎します