函数防抖和节流
<body>
<button id="btn">按钮</button>
</body>
作用：防止短时间内高频繁调用同一接口的方法
防抖：设置延时器，短时间高频率触发只有最后一次触发成功
var timer = null
document.getElementById('btn').onclick = function () {
clearTimeout(timer)
timer = setTimeout (() => {
console.log(1)
},1000)
}
节流：设置状态锁，短时间内高频率触发只有第一次触发成功
var key= false
document.getElementById('btn').onclick = function () {
if (!key) {
key = true
setTimeout (() => {
console.log(1)
key = false
},2000)
}
}
防抖和节流的区别
1. 相同点：
a. 都可以通过使用 setTimeout 实现
b. 目的都是，降低回调执行频率。节省计算资源
2. 不同点：
a. 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
b. 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次
应用场景
1. 防抖在连续的事件，只需触发一次回调的场景有：
a. 搜索框搜索输入。只需用户最后一次输入完，再发送请求
b. 手机号、邮箱验证输入检测
c. 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
2. 节流在间隔一段时间执行一次回调的场景有：
a. 滚动加载，加载更多或滚到底部监听
b. 搜索框，搜索联想功能
1494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
