如何避免频繁的去执行函数（函数防抖和节流）

我们在平时的前端开发中，会有很多场景会频繁触发事件。比如以下情况：

1. window对象的resize、scroll事件
2. 拖拽时的mousemove事件
3. 文字输入、自动完成的keyup事件

但是我们有时候，为了避免在某一时间段内事件的频繁使用增加了服务器的压力，我们这个时候就要讲到函数防抖和节流了！

函数防抖

函数防抖是指对于当事件在某个时间段被触发后再执行的回调，如果这个时候又重新被触发，则重新开始计时，短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。

1). 封装一个函数

2). 使用时直接调用（这里我们以鼠标拖拽为例）

这个时候当你鼠标在浏览器中移上去时，不管你怎么移动,只要1s内你鼠标移动了，控制台才会打印num，当过了1s后鼠标移动时再次打印num值。 因为mousemove 事件会耗费系统资源，在很大移动程度上，函数防抖解决了资源的大量消耗，很好的缓解事件频繁触发所带来的压力。

注意：

• 在实际的应用场景中，大多数情况都会使用事件的第一个参数来获取值，在闭包返回的匿名函数中拥有这个参数，但是函数是在定时器的匿名函数中执行的，所以并不具有这个参数。
• 如果不使用mouseMove函数直接绑定getNum为点击事件，在getNum中使用console.log(num)打印出来num的值。所以使用了防抖函数以后也要修正这个问题。

函数节流

预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

这里以页面滚动为例，普通的做法就是监听 window 对象的 scroll 事件，然后再函数体中写入判断是否滚动到底部的逻辑：

总的来说，函数防抖（debounce）和 函数节流（throttle）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。