函数节流封装

1.什么是函数节流[throttle]?

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

2.函数节流作用

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

3.函数节流应用场景

oninput / onmousemove  / onscroll / onresize等事件

4.函数节流和函数防抖区别

函数节流是减少连续的高频操作函数执行次数  (例如连续调用10次, 可能只执行3-4次)
函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)
     function throttle(fn, delay) { // fn = test
        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);
        }
    } 
posted @ 2020-12-23 13:59  砂糖一椰子  阅读(360)  评论(0编辑  收藏  举报