簡單實現節流函數和防抖函數過程解析

 更新時間:2019年10月08日 11:59:08   作者:有夢想的咸魚前端   我要評論
這篇文章主要介紹了簡單實現節流函數和防抖函數過程解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

在日常開發中有很多場景我們都需要用到節流函數和防抖函數,比如:實現輸入框的模糊查詢因為需要輪詢ajax,影響瀏覽器性能,所以需要用到節流函數;實現手機號、姓名之類的的驗證,往往我們只需要驗證一次,這個時候我們就需要用到防抖函數;但是網上的很多資料都是不夠具體和便于理解。今天自己翻閱了一些資料之后,來簡單的談談我對節流函數和防抖函數的理解,希望能幫助大家理解;

節流函數

顧名思義,就是節省流量節省內存性能的一種函數,可以理解為是一種性能優化方案;

舉個例子:一個水龍頭一直在滴水,可能一次性會滴很多水,但是我們想控制它的頻率 ,讓它每1000毫秒滴一滴水,這個時候我們就可以用到節流函數來進行控制(簡單可以理解為類似于周期性定時器)

js代碼(可直接復制到編輯器上看效果):

//首先定義一個全局變量
var canRun = true;
//當瀏覽器窗口大小發生變化也就是重新計算窗口大小的時候觸發
window.onresize = function(){
// 取反,canRun為false的情況下
if(!canRun){
//直接return,后面的代碼不執行
 return
}
//走到這來就是canRun為true的情況,然后進行賦值為false
canRun = false

//設置一個定時器進行輪詢操作
setTimeout( function () {
//這是要做的事情
  console.log("函數節流")
//最后記得重新賦值true繼續讓他取反
  canRun = true
//每隔1000毫秒也就是1秒鐘就執行一次

 }, 1000)
}

效果圖如下:

防抖函數

防抖函數和節流函數很類似,但是稍有區別,防抖函數的定義是當事件觸發完成之后再延遲觸發,并且只觸發一次;如果在觸發完成之前再次觸發,則會再次刷新延遲;簡單理解為(如果事件不觸發即不執行,并且只會執行一次,就是定時器最后走的那一次)

舉個例子:假如有個彈簧,你一直往下按壓只要你不松手就是不會彈出的,彈簧只有在你松手的那一瞬間才會彈出去;防抖函數也是如此,只要事情觸發沒有結束是不會執行的,只有在事件觸發結束后延遲執行一次;

js代碼(可直接復制到編輯器上看效果):

//定義方法即要做的事情
function fun(){
 console.log('onresize')
 
}
//定義事件觸發要執行的方法,兩個參數分別是傳入的要做的事情和定時器的毫秒數
function debounce(fn,delay){
  //定義一個變量作為等會清除對象
    var handle;
  //這里用到了閉包,一個函數里面return另一個函數,變量相互簽引導致垃圾回收機制不會銷毀handle變量
    return function(){
      //在這里一定要清除前面的定時器,然后創建一個新的定時器
      clearTimeout(handle) 
      //最后這個定時器只會執行一次也就是事件觸發完成之后延遲500毫秒再觸發(這里的變量賦值是跟定時器建立連接,進行地址賦值,一定要重新賦值給handle 
     handle=setTimeout(function(){
       fn()
     },delay)
    }
    
   }
//給瀏覽器添加監聽事件resize
window.addEventListener('resize', debounce(fun, 500));

效果圖如下:

總結:

1.防抖函數和節流函數都是用來提升性能優化及用戶體驗的一種方案;

2.防抖函數只會執行一次,且是最后觸發的那一次,而節流函數會規律性的執行多次;

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論

码报108