快捷導(dǎo)航

一文看懂如何簡(jiǎn)單實(shí)現(xiàn)節(jié)流函數(shù)和防抖函數(shù)

更新時(shí)間：2019年09月05日 10:00:01 作者：有夢(mèng)想的咸魚前端

這篇文章主要給大家介紹了如何通過一文看懂簡(jiǎn)單實(shí)現(xiàn)節(jié)流函數(shù)和防抖函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在日常開發(fā)中有很多場(chǎng)景我們都需要用到節(jié)流函數(shù)和防抖函數(shù)，比如：實(shí)現(xiàn)輸入框的模糊查詢因?yàn)樾枰喸僡jax，影響瀏覽器性能，所以需要用到節(jié)流函數(shù)；實(shí)現(xiàn)手機(jī)號(hào)、姓名之類的的驗(yàn)證，往往我們只需要驗(yàn)證一次，這個(gè)時(shí)候我們就需要用到防抖函數(shù)；但是網(wǎng)上的很多資料都是不夠具體和便于理解。今天自己翻閱了一些資料之后，來簡(jiǎn)單的談?wù)勎覍?duì)節(jié)流函數(shù)和防抖函數(shù)的理解，希望能幫助大家理解；

節(jié)流函數(shù)

顧名思義，就是節(jié)省流量節(jié)省內(nèi)存性能的一種函數(shù)，可以理解為是一種性能優(yōu)化方案；

舉個(gè)例子：一個(gè)水龍頭一直在滴水，可能一次性會(huì)滴很多水，但是我們想控制它的頻率，讓它每1000毫秒滴一滴水，這個(gè)時(shí)候我們就可以用到節(jié)流函數(shù)來進(jìn)行控制（簡(jiǎn)單可以理解為類似于周期性定時(shí)器）

js代碼（可直接復(fù)制到編輯器上看效果）：

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

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

 }, 1000)
}

效果圖如下：

防抖函數(shù)

防抖函數(shù)和節(jié)流函數(shù)很類似，但是稍有區(qū)別，防抖函數(shù)的定義是當(dāng)事件觸發(fā)完成之后再延遲觸發(fā)，并且只觸發(fā)一次；如果在觸發(fā)完成之前再次觸發(fā)，則會(huì)再次刷新延遲；簡(jiǎn)單理解為（如果事件不觸發(fā)即不執(zhí)行，并且只會(huì)執(zhí)行一次，就是定時(shí)器最后走的那一次）

舉個(gè)例子：假如有個(gè)彈簧，你一直往下按壓只要你不松手就是不會(huì)彈出的，彈簧只有在你松手的那一瞬間才會(huì)彈出去；防抖函數(shù)也是如此，只要事情觸發(fā)沒有結(jié)束是不會(huì)執(zhí)行的，只有在事件觸發(fā)結(jié)束后延遲執(zhí)行一次；

js代碼（可直接復(fù)制到編輯器上看效果）：

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

效果圖如下：