JS系列之防抖節(jié)流

everfight 發(fā)布于2019-08-23 14:40 / 661人閱讀

摘要：概念函數(shù)節(jié)流和函數(shù)防抖，兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。函數(shù)節(jié)流與函數(shù)防抖都是為了限制函數(shù)的執(zhí)行頻次，以優(yōu)化函數(shù)觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。節(jié)流指定時(shí)間間隔內(nèi)，只會(huì)執(zhí)行最后一次任務(wù)。

概念

函數(shù)節(jié)流和函數(shù)防抖，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。

函數(shù)節(jié)流（throttle）與函數(shù)防抖（debounce）都是為了限制函數(shù)的執(zhí)行頻次，以優(yōu)化函數(shù)觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。

函數(shù)節(jié)流（throttle）

函數(shù)節(jié)流是指一定時(shí)間內(nèi)執(zhí)行的操作只執(zhí)行一次，也就是說即預(yù)先設(shè)定一個(gè)執(zhí)行周期，當(dāng)調(diào)用動(dòng)作的時(shí)刻大于等于執(zhí)行周期則執(zhí)行該動(dòng)作，然后進(jìn)入下一個(gè)新周期。
節(jié)流：指定時(shí)間間隔內(nèi)，只會(huì)執(zhí)行最后一次任務(wù)。

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
// 處理函數(shù)
function handle() {   
    console.log(Math.random());
}
// 滾動(dòng)事件
window.addEventListener("scroll", debounce(handle, 1000));

函數(shù)防抖（debounce）

函數(shù)防抖是指在一定時(shí)間內(nèi)，在動(dòng)作被連續(xù)頻繁觸發(fā)的情況下，動(dòng)作只會(huì)被執(zhí)行一次，也就是說當(dāng)調(diào)用動(dòng)作過n毫秒后，才會(huì)執(zhí)行該動(dòng)作，若在這n毫秒內(nèi)又調(diào)用此動(dòng)作則將重新計(jì)算執(zhí)行時(shí)間，所以短時(shí)間內(nèi)的連續(xù)動(dòng)作永遠(yuǎn)只會(huì)觸發(fā)一次。
防抖：指定時(shí)間間隔內(nèi)，只會(huì)執(zhí)行第一次任務(wù)。

時(shí)間戳

var throttle = function(func, delay) {           
    var prev = Date.now();           
    return function() {               
        var context = this;               
        var args = arguments;               
        var now = Date.now();               
        if (now - prev >= delay) {                   
            func.apply(context, args);                   
            prev = Date.now();               
        }           
    }       
}       
function handle() {           
    console.log(Math.random());       
}       
window.addEventListener("scroll", throttle(handle, 1000));

定時(shí)器

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener("scroll", throttle(handle, 1000));