JavaScript での機能スロットルと手ぶれ補正の実装 (コード付き)

この記事の内容は、JavaScript での関数スロットルとアンチシェイクの実装に関するものです。必要な方は参考にしていただければ幸いです。

関数スロットル (スロットル)

用語の説明

関数スロットル (スロットル): 関数を継続的に実行し、一定の間隔で関数を実行します

使用シナリオ

マウスの移動、mousemove イベント
DOM 要素の動的配置、ウィンドウ オブジェクトのサイズ変更とスクロール イベント
etc...

関数スロットルの簡単な実装

function throttle(fn, delay) {
    var last; // 上次执行的时间
    var timer; // 定时器
    delay || (delay = 250); // 默认间隔为250ms
    return function() {
        var context = this;
        var args = arguments;
        var now = +new Date(); // 现在的时间
        if (last && now < last + delay) { // 当前距离上次执行的时间小于设置的时间间隔
            clearTimeout(timer); // 清除定时器
            timer = setTimeout(function() { // delay时间后，执行函数
                last = now;
                fn.apply(context, args);
            }, delay);
        } else { // 当前距离上次执行的时间大于等于设置的时间，直接执行函数
            last = now;
            fn.apply(context, args);
        }
    };
}

Function debounce (デバウンス)

用語の説明

関数 debounce (デバウンス): 呼び出しメソッドは、アイドル時間が特定の値以上である必要がある場合にのみ実行されます

利用シナリオ

テキスト入力キーダウンイベント
Wait...

手ぶれ補正(デバウンス)機能の簡単な実装

function debounce(fn, delay) {
    var timer; // 定时器
    delay || (delay = 250); // 默认空闲时间250ms
    return function() {
        var context = this;
        var args = arguments;
        clearTimeout(timer); // 清除定时器
        timer = setTimeout(function() { // delay时间后，执行函数
            fn.apply(context, args);
        }, delay);
    };
}

以上がJavaScript での機能スロットルと手ぶれ補正の実装 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。