函數節流和防抖

函數節流:一個函數執行一次後 只有大於設定的執行週期後纔會執行第二次

需要頻繁觸發的函數,處於性能角度考慮,在規定時間內,只讓函數觸發的第一次生效,後面不生效

//節流函數
//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)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章