防抖：連續觸發事件，只要不是最后一次觸發，就不執行異步操作
<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>
防抖和節流區別：防抖只會觸發最后一次事件，節流只有請求成功回傳資料后才會觸發下一次事件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/254112.html
標籤：其他