什么是防抖和节流？有什么区别？如何实现？
防抖：连续触发事件，只要不是最后一次触发，就不执行异步操作
<button>点我试试</button>
<script>
var btn = document.querySelector(button)
var timer = null
btn.onclick = function () {
// 每次执行把上一次定时器清除，第一次执行也会清除timer
clearTimeout(timer)
// 延时 0.5s 执行
timer = setTimeout(() => {
console.log(发送请求了。。。)
}, 500)
}
</script>
节流：第一次发生请求后，只要响应没回来，就不能发送第二次（定义了一个开关控制）
<button>点我试试</button>
<script>
var btn = document.querySelector(button)
// 节流阀 定义了一个开关
var flag = true
btn.onclick = function () {
// 如果节流阀是开启的，才会执行操作
if (flag) {
// 一旦执行 关闭节流阀
flag = false
console.log(发送请求)
setTimeout(() => {
// 请求成功后，在开启节流阀
flag = true
}, 1000)
}
}
</script>
防抖和节流区别：防抖只会触发最后一次事件，节流只有请求成功发生响应后才会触发下一次事件
上一篇：
IDEA上Java项目控制台中文乱码