JS - 函数节流封装

函数节流[throttle]

函数节流也是优化高频率执行js代码的一种手段
可以减少高频调用函数的执行次数

函数节流作用

减少代码执行次数, 提升网页性能

函数节流应用场景

oninput / onmousemove / onscroll / onresize等事件

函数节流和函数防抖区别

• 函数节流是减少连续的高频操作函数执行次数 (例如连续调用10次, 可能只执行3-4次)
• 函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)

function throttle(fn, delay) {
    let timerId = null;
    let flag = true;
    return function () {
        if(!flag) return;
        flag = false;
        let self = this;
        let args = arguments;
        timerId && clearTimeout(timerId);
        timerId = setTimeout(function () {
            flag = true;
            fn.apply(self, args);
        }, delay || 1000);
    }
}