函數節流:一個函數執行一次後 只有大於設定的執行週期後纔會執行第二次
需要頻繁觸發的函數,處於性能角度考慮,在規定時間內,只讓函數觸發的第一次生效,後面不生效
//節流函數
//fn 要被節流的函數
//delay 規定的時間
function throttle(fn,delay){
//記錄上一次函數觸發的時間
var lastTime = 0;
return function(){
//記錄當前函數觸發的時間
var nowTime = Date.now()
if(nowTime - lastTime > delay){
//修正this指向問題
fn().call(this)
lastTime = nowTime
}
}
}
document.onscoll = throttle(function(){console.log('scroll事件被觸發了!!' + Date.now())})
防抖函數
一個需要頻繁觸發的函數,在規定時間內只讓最後一次生效,前面的不生效
function debounce(fn,delay){
//記錄上一次的延時器
var timer = null;
return fucntion(){
//清除上一次延時器
//重新設置新的延時器
clearTimeout()
timer = setTimeout(function(){
fn.apply(this)
},delay)
}
}
document.getElementByUId("btn").click = debounce(function(){ console.log("點擊事件被觸發了"+ Date.now())},1000)