防抖节流

防抖节流

认识防抖节流

JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。而对于某些频繁的事件处理会造成性能的损耗，可以通过防抖和节流来限制事件频繁发生

为什么需要防抖节流

为什么需要防抖？

举个例子：

比如想要搜索一个MacBook：

• 当输入m时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网络请求；
• 当继续输入ma时，再次发送网络请求；
• 那么macbook一共需要发送7次网络请求；
• 这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力；

但是我们需要这么多次的网络请求吗？

• 不需要，正确的做法应该是在合适的情况下再发送网络请求；
• 比如如果用户快速的输入一个macbook，那么只是发送一次网络请求；
• 比如如果用户是输入一个m想了一会儿，这个时候m确实应该发送一次网络请求；
• 也就是我们应该监听用户在某个时间，比如500ms内，没有再次触发时间时，再发送网络请求；

这就是防抖的操作：

• 只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

• 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；

• 当事件密集触发时，函数的触发会被频繁的推迟；

• 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

防抖的应用场景：

• 输入框中频繁的输入内容，搜索或者提交信息
• 频繁的点击按钮，触发某个事件
• 监听浏览器滚动事件，完成某些特定操作
• 用户缩放浏览器的resize事件

总之，密集的事件触发，我们只希望触发比较靠后发生的事件，就可以使用防抖函数；

为什么需要节流？

节流：在某个时间内（比如500ms），某个函数只能被触发一次；

节流的应用场景：

• 监听页面的滚动事件
• 鼠标移动事件
• 用户频繁点击按钮操作

总之，依然是密集的事件触发，但是这次密集事件触发的过程不会等到最后一次才进行函数调用，而是会按照一定的频率进行调用