函數節流
規定時間內只執行一次對應的事件
比如：
游戲中的技能冷卻，在這個冷卻時間內你是無法釋放你的技能的，只有在冷卻時間過了才可以重新釋放技能
應用場景
- 游戲中的刷新率
- DOM元素拖拽
- Canvas畫筆功能
節流初始都是從0秒開始的，也就是說當第一次觸發事件的時候緊接著會執行
簡易代碼：
function fn(){}
var cd = false
button.onclick = function(){
//如果在三秒內連續觸發該事件，只有第一次是緊接著執行，之后不會再執行
if(!cd){
//緊接著執行fn
fn()
cd = true
var timerId = setTimeout(()=>{
cd = false
},3000)
}
}
封裝
function throttle(fn,delay){
var cd = false
return ()=>{
if(!cd){
fn()
cd = true
var timer = setTimeout(()=>{
cd = false
},delay)
}
}
}
函數防抖
在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時。
比如：
如果有人進電梯（觸發事件），那電梯將在10秒鐘后出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。
- 給按鈕加函數防抖防止表單多次提交。
- 對于輸入框連續輸入進行AJAX驗證時，用函數防抖能有效減少請求次數。
- 判斷scroll是否滑到底部，滾動事件+函數防抖
防抖初始事件第一次觸發的時候需要等到一段時間后才執行
var timerId = null
button.onclick = function(){
if(timerId){
window.clearTimeout(timerId)
}
//每次都重新定義計時器
timerId = setTimeout(()=>{
//一段時間后再執行fn
fn()
timerId = null
},5000)
}
封裝
function debounce (fn, delay){
var timer
return ()=>{
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn()
},delay)
}
}
