JS 関数のスロットリングの使用法

今回は、JS 関数のスロットリングの使用方法について説明します。JS 関数のスロットリングを使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。

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

関数スロットルとは、関数が実行サイクル以上の場合にのみ実行されるようにスケジュールし、サイクル内の呼び出しは実行されません。水滴が一定の重さまで溜まると落ちるのと同じです。

シナリオ:

ウィンドウのサイズ変更 (サイズ変更)

スクロール (スクロール)

クレイジークリック (マウスダウン)

実装:

function throttle(method, delay){    var last = 0;    return function (){        var now = +new Date();        if(now - last > delay){
            method.apply(this,arguments);
            last = now;
        }
    }
}document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);

アンダースコア 実装:

_.throttle = function(func, wait, options) {    var context, args, result;    var timeout = null;    var previous = 0;    if (!options) options = {};    var later = function() {
        previous = options.leading === false ? 0 : _.now();
        timeout = null;
        result = func.apply(context, args);        if (!timeout) context = args = null;
    };    return function() {        var now = _.now();        if (!previous && options.leading === false) previous = now;        //计算剩余时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;        //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
        if (remaining <= 0 || remaining > wait) {            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }        return result;
    };
};

関数 debounce (デバウンス)

関数デバウンスつまり、この関数は状況を頻繁にトリガーする必要があるため、十分な空き時間があるときに 1 回だけ実行されます。バスの運転手さんは全員がバスに乗り込むのを待ってからバスを降りるようです。

シーン:

リアルタイム

検索(キーアップ)

ドラッグ(マウス移動)

実装:

function debounce(method, delay){    var timer = null;    return function(){        var context = this,args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.apply(context, args);
        },delay);
    }
}document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);

アンダースコア実装:

_.debounce = function(func, wait, immediate) {    var timeout, args, context, timestamp, result;    var later = function() {        var last = _.now() - timestamp;        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;            if (!immediate) {
                result = func.apply(context, args);                if (!timeout) context = args = null;
            }
        }
    };    return function() {
        context = this;
        args = arguments;
        timestamp = _.now();        var callNow = immediate && !timeout;        if (!timeout) timeout = setTimeout(later, wait);        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }        return result;
    };
};

関数スロットリング (スロットル) と関数デバウンス (デバウンス) は両方とも遅延を通じて行われます。論理演算を通じてパフォーマンスを向上させる方法は、フロントエンドの最適化における一般的かつ重要なソリューションです。概念と実際のアプリケーションから 2 つの違いを理解し、必要に応じて適切な方法を選択できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他の関連記事に注目してください。

推奨読書:

JS コードを使用して弾幕エフェクトを作成する

H5 キャンバスを使用して弾幕エフェクトを作成する

以上がJS 関数のスロットリングの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。