筆記-JavaScript[節流][防抖]

函式防抖: 任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。

debounce(fn, delay=50) {
    var timer = null;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() =>{
            fn.apply(this, arguments);
        }, delay);
    };
}
複製程式碼

函式節流: 指定時間間隔內只會執行一次任務

throttle(fn, step=50) {
    var bool = true, timer = null;
    return function () {
        if (bool) {
            bool = false;
            clearTimeout(timer);
            timer = setTimeout(() =>{
                fn.apply(this, arguments);
                bool = true;
            }, step);
        }
    };
}
複製程式碼

example：

var i = 1;
window.onresize = this.debounce((e)=>{
    console.log(i++);
},500)
複製程式碼

// React
<div onClick={this.debounce(this.hello)}>點我</div>
複製程式碼