函数节流和函数防抖，两者都是优化高频率执行js代码的一种方法
防抖（debounce）：在一段时间内只要不是最后一次触发就不会发送异步请求（定时器实现）。
节流（throttle）：只要第一次请求发送后，响应没回来前，就不能发送第二次请求（开关变量实现）。
现象
看下以下代码（模拟客户端向服务器发送请求）：
可以看到，我仅仅向下滑动了3次，向上滑动了三次就发出了将近70次请求。
解决
提前准备一个定时器，每次触发事件时都去看看定时器是不是空，不是的话取消之前的定时器，是的话就开始新一轮的等待。
现象
看下以下代码（模拟客户端向服务器发送请求）：
可以发现如果不加以限制的话，快速点击，也会发出很多请求
解决
提前准备一个开关变量，当第一次点击发送请求时，允许发送，但是要把开关关闭，点击不再发送请求，直到请求回来后把开关打开，这次又能重新发送请求。
防抖
- 搜索框搜索输入。
即在用户停止输入一段小时间后才会发送请求，如果在这一小段时间用户继续输入则重新计时。
- 窗口大小调节。
窗口调整完成后一小段时间进行渲染，如果在这一小段时间内又进行了调整，则重新计时，直到计时结束进行渲染。
节流
- 高频率点击提交按钮。
在一小段时间内，高频率点击提交按钮，只发送第一次请求，等到请求回来后，再点击提交按钮才会再次发送请求。
- 滚动加载，加载更多或者滚动到底部自动加载
在一小段时间内，滚动加载、加载更多或者滚动到底部自动加载，只在第一次滚动发送请求，等到请求回来后，再点击提交按钮才会再次发送请求。
其实滚动加载也可使用防抖，即在用户停止滚动一段小时间后才会发送请求，如果在这一小段时间用户继续滚动则重新计时。以上防抖中的案例就是采用防抖来解决的。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/6942.html