JS防抖与节流

先说一下防抖特性：即在固定的时间内触发事件过多则会不停的刷新那个时间，比如我要在3秒后执行一个时间，当我们不停的去触发这个时间，这等待的3秒会被不停的刷新为3秒，只有当我们点击后不在进行触发该事件得操作，该事件才会被执行

节流的特性：其实节流的特性和我们的防抖差不多，只是节流的特性是，在一个固定的时间内，不管我们触发多少次的时间，他都只会执行一次。比方说就是在3秒内我们触发很多的事件，在这个期间内，他都只会执行一次的事件操作。

它们相同的特性我觉得就是把我们很高频率的操作变为一个低频率的操作

接下来我们可以看一下代码上是的区别

先看防抖代码：

    function fn(fun){//fun是我们等会传进来的实参，所执行的函数体
        let timer;//定义一个变量来积存计时器
        return function(){
            clearTimeout(timer);//每次调用都会先关闭计时器
            timer=setTimeout(fun,1000)//1秒后调用这函数体
        }
    } 
    let i=0;
    function body(){//等会传进去的函数
        console.log(i++)
    }
    document.getElementById('div').onmousemove=fn(body)//高频触发所调用的函数

通过上面的代码就简单的完成一个防抖函数的小demo如果需要优化的话，需要自行优化

接下来看看节流的代码：

    function fn(fun){
        let timer;
        return function(){
            if(!timer){//必定执行一次
                timer=setTimeout(function(){
                    timer=null//在定时器执行完毕，取空代表后续的可以执行
                    fun();
                },1000)
            }   
        }
    } 
    let i=0;
    function body(){
        console.log(i++)
    }
    document.getElementById('div').onmousemove=fn(body)

上面代码是我通过视频所写的，一个节流的小demo，使用的话对其进行小改就行。

总结一下上面的所有东

防抖：在一个计时器内，触发事件如果多次触发，则计时时间会被重置。

节流：持续触发事件，隔一段事件，只执行一次