JavaScript スロットリングとデバウンス

序文

この記事では主に JavaScript のスロットリングとアンチ シェイクについて説明します。スロットリングとアンチ シェイクは、本質的に、高頻度のコードの実行を最適化する手段です。

たとえば、ブラウザのmousemove、resize、scrollおよびその他のイベントがトリガーされると、バインドされたイベント関数が継続的に呼び出され、フロント エンドのパフォーマンスが大幅に低下します。

パフォーマンスを最適化するには、そのようなイベントへの呼び出しの数を制限する必要があります。これには、デバウンスとスロットルを使用して呼び出し頻度を減らすことができます。

アンチシェイク

高頻度イベントがトリガーされた後、関数は n 秒以内に 1 回だけ実行されます. 高頻度イベントが n 秒以内に再度トリガーされた場合、時間は再計算されます.

防振原理

タイマーを維持します。これは、関数が遅延時間の後にトリガーされることを規定していますが、遅延時間内に再度トリガーされると、現在のタイマーがクリアされ、タイムアウト呼び出しがリセットされます。つまり、タイマーが再起動されます。

手ブレ防止のデメリット

指定された時間間隔内でイベントが継続的にトリガーされる場合、呼び出しメソッドは継続的に遅延されます。

サンプルコード

	//防抖debounce代码：
	function debounce(fn) {
	    let timeout = null;
	    return function () {
	        clearTimeout(timeout); 
	        timeout = setTimeout(() => {
	            fn.apply(this, arguments);
	        }, 500);
	    };
	}
	// 处理函数
	function handle() {
	    console.log(Math.random());
	}
	// 给 window 添加滚动事件
	window.addEventListener('scroll', debounce(handle));

スロットリング

高頻度のイベントはトリガーしますが、n 秒に 1 回しか実行しません。スロットリングにより、関数の実行頻度が低下します。

スロットリングの原則

一定時間経過したかどうかを判定して起動し、一定時間経過していない場合はタイマーで遅延させ、次のイベントでタイマーをリセットします。

実行されていない遅延呼び出し機能があるかどうかを判断するのが原則です。

サンプルコード

        //函数节流锁
        function throttle(fn, delay) {
            let Lock = true; 
            return function () {
                if (!lock) return;
                lock = false;
                setTimeout(() => { 
                    fn.apply(this, arguments);
                    lock = true;
                }, delay);
            };
        }

比較まとめ

• 機能アンチシェイク: 複数の操作を 1 つの操作に結合します。

• 関数のスロットリング: イベント関数が特定の期間内に 1 回だけトリガーされるようにします。

これでこの記事は終わりです

他のアイデアがある場合は、コメント欄でお知らせください。