JS的函數節流使用

這次帶給大家JS的函數節流使用，JS函數節流使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

函數節流(throttle)

函數節流就是預定函數只有在大於等於執行週期時才執行，週期內呼叫不執行。好像水滴攢到一定重量才會落下一樣。

場景：

視窗調整（resize）

頁面捲動（scroll）

搶購瘋狂點擊（mousedown）

實作：

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);

underscore實作：

_.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)

函數防手震就是在函數需要頻繁觸發情況時，只有足夠空閒的時間，才執行一次。好像公車司機會等人都上車後才出站一樣。

場景：

即時搜尋（keyup）

#拖曳（mousemove）

實作：

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);

underscore實作：

_.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;
    };
};

函數節流(throttle)和函數防手震(debounce)都是透過延時邏輯運算來提升效能的方法，在前端最佳化中是常見且重要的解決方式。可以從概念和實際應用中理解兩者的區別，在需要的時候選擇合適的方法處理。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

用JS程式碼做出彈幕效果

用H5的canvas做出彈幕效果

#

以上是JS的函數節流使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！