JavaScript——防抖&节流

防抖和节流是防止高频率触发的事件

防抖，一般用在使用

onresize事件（onresize：当浏览器被重置大小时执行Javascript代码）、

oninput事件：在用户输入时触发。

如果事件进行高频率触发，很可能会导致服务器崩溃

那么就可以使用函数防抖进行优化，比如你乘坐电梯，如果十秒钟之内有人进入或者出去，那么十秒钟就会重新开始计时，直到十秒之内都不在有人流动才会关门

那么节流就不一样了：同样是电梯十秒运作，电梯的机制是当人进入电梯 后，十秒钟内自动关门，这十秒钟内人可以进出，当到了十秒钟后，不管你有没有人进入出去都直接关门，准时运作。

函数节流简单理解

每隔一段时间执行一次

函数防抖简单理解

每当事件触发一次，就会重置定时器，一直到最后一次触发事件，再去执行

防抖一般用于触发input事件

例如：

    请输入信息：
    

效果如下：

我们在输入文字时，每次输入都会发送请求，这样中间的很多东西没有必要给后端，给了的话对服务器的压力非常大，那么在这里可以使用函数防抖来进行优化 

进行优化过后：

    
    
    
    


    请输入信息：
    

 效果如下图所示：

 节流

原理：规定一个时间，在这个时间段内的所有事件都会一起被执行

一般用于：resize，touchmove移动DOM，上拉列表加载数据等

例如：

效果为每个一秒节流一次 

详情

扩展例子如下：

    

        加入节流-定时器 & 时间戳：