防抖与节流

一、前言 

        当函数绑定一些持续触发的事件如：resize、scroll、mousemove ，键盘输入，多次快速click等等，如果每次触发都要执行一次函数，会带来性能下降，资源请求太频繁等问题。由此出现防抖与节流来解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

 // 防抖： 触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行的时间
    // 触发的是指定时间内 最后一次事件

    function moveFn(e) {
        e = e || event;
        console.log('哈哈哈出发了', e.clientX, e.clientY);
    }

    //  参数 需要处理的函数   参数 控制触发时间频率
    let shakeMoveFn = AntiShake(moveFn, 100);
    document.body.onmousemove = shakeMoveFn;

    // 防抖函数 降低触发频率
    function AntiShake(fn, t) {
        // 初始化一个timer变量 为null  后期用来存定时器
        let timer = null;
        return function(e) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn(e);
            }, t)
        }
    }

节流 ：指定时间间隔内只会执行一次任务。

 // 前端 高频事件 scroll  mousemove  touchmove  
    // 节流：指连续触发事件但是在一段时间内只执行一次函数
    // 触发的是指定时间 内 第一次触发的事件


    function moveFn(e) {
        e = e || event;
        console.log('哈哈哈出发了', e.clientX, e.clientY);
        // 重排 重新绘制 浏览器性能开销较大 最好的方式高频降低触发频率
    }

    document.body.onmousemove = Throne(moveFn, 1000);

    function Throne(fn, t) {
        var timer = null;
        return function(e) {
            if (!timer) {
                timer = setTimeout(() => {
                    fn(e);
                    timer = null;
                }, t)
            }

        }

    }