函数防抖和节流的几种解决方案及区别

直接进入正题，有的时候使用scroll或者mousemove这类函数并不需要那么频繁的调用这些函数，举个栗子，dom的mousemove 事件。

<div id="content"
    style="height:800px;width:800px;line-height:400px;text-align:center; color: rgb(0, 0, 0);background-color:rgb(134, 70, 70);font-size:80px;font-weight: 800;"></div>
<script>
    let num = 1;
    let content = document.getElementById('content');
    content.onmousemove = ()=>{
        content.innerHTML = num++;
    };
</script>

mark

在有些业务下显然是不合理的，比如监听访问后的网络请求， 只要请求速度跟不上响应的速度，那么肯定会有卡顿的情况发生，以下有几种解决办法

防抖（debounce）

多次访问函数，最终变成一次执行的方式

1.通过不断重置setTimeout的时间来让方法延迟执行，show code follow

mark

    let num = 1;
    let content = document.getElementById('content');

    function move() {
        content.innerHTML = num++;
    }
    content.onmousemove = debounce(move, 1000)
    //第一次访问设置1000的timeout，以后每次访问都是由apply来引导到当前this的函数（也就是debounce）重置timeout
    function debounce(func, wait) {
        let timeout;
        return function () {
            let context = this;
            let args = arguments;

            if (timeout) clearTimeout(timeout);

            timeout = setTimeout(() => {
                func.apply(context, args)
            }, wait);
        }
    }

解释在注释，业务中当鼠标停住后，最后一次延时计时1000ms，然后move()

节流（throttle ）

1.对比前后两次的时间戳，间隔很小取消执行，间距很大即可执行，show code follow

mark

  let num = 1;
    let content = document.getElementById('content');

    function move() {
        content.innerHTML = num++;
    }
    content.onmousemove = throttle(move, 1000)

    function throttle(func, wait) {
    var context, args;
    var previous = 0;

    return function() {
        var now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

2.setTimeout定时器也可以达到效果相同的节流效果，show code follow

mark

    let num = 1;
    let content = document.getElementById('content');

    function move() {
        content.innerHTML = num++;
    }
    content.onmousemove = throttle(move, 1000)
    function throttle1(func, wait) {
        var timeout;
        var previous = 0;

        return function () {
            context = this;
            args = arguments;
            if (!timeout) {
                timeout = setTimeout(function () {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }

        }
    }

但是这两种节流的实现方法还是有很大区别的

一、
第一种对比时间戳是一旦满足空挡时间即刻执行，
第二种是定时器控制定时完成后再去执行函数，有本质上的区别
PS:假如空隙为3s，第一种会立即执行第一次，第二种会3s后执行第一次、
二、
一种事件停止触发后没有办法再执行事件，第二种事件停止触发后依然会再执行一次事件

附上原文链接，欢迎大家讨论
https://github.com/mqyqingfeng/Blog/issues/22