問(wèn)題1：如果實(shí)現(xiàn)了dom拖拽功能，但是在綁定拖拽事件的時(shí)候發(fā)現(xiàn)每當(dāng)元素稍微移動(dòng)一點(diǎn)便觸發(fā)了大量的回調(diào)函數(shù)，導(dǎo)致瀏覽器直接卡死，這個(gè)時(shí)候怎么辦？

**問(wèn)題2：**如果給一個(gè)按鈕綁定了表單提交的post事件，但是用戶(hù)有些時(shí)候在網(wǎng)絡(luò)情況極差的情況下多次點(diǎn)擊按鈕造成表單重復(fù)提交，如何防止多次提交的發(fā)生？

為了應(yīng)對(duì)如上場(chǎng)景，便出現(xiàn)了 函數(shù)防抖 和 函數(shù)節(jié)流 兩個(gè)概念，總的來(lái)說(shuō)：

這兩個(gè)方法是在 時(shí)間軸上控制函數(shù)的執(zhí)行次數(shù)。

函數(shù)防抖(debounce)

概念： 在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。

生活中的實(shí)例： 如果有人進(jìn)電梯（觸發(fā)事件），那電梯將在10秒鐘后出發(fā)（執(zhí)行事件監(jiān)聽(tīng)器），這時(shí)如果又有人進(jìn)電梯了（在10秒內(nèi)再次觸發(fā)該事件），我們又得等10秒再出發(fā)（重新計(jì)時(shí)）。

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

概念： 規(guī)定一個(gè)單位時(shí)間，在這個(gè)單位時(shí)間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個(gè)單位時(shí)間內(nèi)某事件被觸發(fā)多次，只有一次能生效。

生活中的實(shí)例： 我們知道目前的一種說(shuō)法是當(dāng) 1 秒內(nèi)連續(xù)播放 24 張以上的圖片時(shí)，在人眼的視覺(jué)中就會(huì)形成一個(gè)連貫的動(dòng)畫(huà)，所以在電影的播放（以前是，現(xiàn)在不知道）中基本是以每秒 24 張的速度播放的，為什么不 100 張或更多是因?yàn)?24 張就可以滿足人類(lèi)視覺(jué)需求的時(shí)候，100 張就會(huì)顯得很浪費(fèi)資源。

分析圖

假設(shè)，我們觀察的總時(shí)間為10秒鐘，規(guī)定1秒作為一次事件的最小間隔時(shí)間。

如果觸發(fā)事件的頻率是 0.5s/次 ，那么函數(shù)防抖如圖

因?yàn)槭冀K沒(méi)法等一秒鐘就被再次觸發(fā)了，所以最終沒(méi)有一次事件是成功的。

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

因?yàn)榭刂屏俗疃嘁幻胍淮?，頻率為 0.5s/次 ，所以每一秒鐘就有一次事件作廢。最終控制成 1s/次

如果觸發(fā)事件的頻率是 2s/次 ，那么

函數(shù)防抖如圖

因?yàn)?2s/次
已經(jīng)大于了規(guī)定的最小時(shí)間，所以每計(jì)時(shí)兩秒便觸發(fā)一次。

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

同樣， 2s/次 大于了最小時(shí)間規(guī)定，所以每一次觸發(fā)都生效。

應(yīng)用場(chǎng)景

對(duì)于函數(shù)防抖，有以下幾種應(yīng)用場(chǎng)景：

• 給按鈕加函數(shù)防抖防止表單多次提交。
• 對(duì)于輸入框連續(xù)輸入進(jìn)行AJAX驗(yàn)證時(shí)，用函數(shù)防抖能有效減少請(qǐng)求次數(shù)。
• 判斷 scroll 是否滑到底部， 滾動(dòng)事件 + 函數(shù)防抖

總的來(lái)說(shuō)，適合多次事件 一次響應(yīng) 的情況

對(duì)于函數(shù)節(jié)流，有如下幾個(gè)場(chǎng)景：

• 游戲中的刷新率
• DOM元素拖拽
• Canvas畫(huà)筆功能

總的來(lái)說(shuō)，適合 大量事件 按時(shí)間做 平均 分配觸發(fā)。

源碼

函數(shù)防抖：

function debounce(fn, wait) {
 var timer = null;
 return function () {
  var context = this
  var args = arguments
  if (timer) {
   clearTimeout(timer);
   timer = null;
  }
  timer = setTimeout(function () {
   fn.apply(context, args)
  }, wait)
 }
}
var fn = function () {
 console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后觸發(fā)，之后每1000ms觸發(fā)一次
setInterval(debounce(fn,2000),1000) // 不會(huì)觸發(fā)一次（我把函數(shù)防抖看出技能讀條，如果讀條沒(méi)完成就用技能，便會(huì)失敗而且重新讀條）

之所以返回一個(gè)函數(shù)，因?yàn)榉蓝侗旧砀袷且粋€(gè)函數(shù)修飾，所以就做了一次函數(shù)柯里化。里面也用到了閉包，閉包的變量是 timer 。

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

function throttle(fn, gapTime) {
 let _lastTime = null;
 return function () {
 let _nowTime = + new Date()
 if (_nowTime - _lastTime > gapTime || !_lastTime) {
  fn();
  _lastTime = _nowTime
 }
 }
}
let fn = ()=>{
 console.log('boom')
}
setInterval(throttle(fn,1000),10)

如圖是實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的函數(shù)節(jié)流，結(jié)果是 一秒打出一次boom

總結(jié)

以上所述是小編給大家介紹的JS函數(shù)節(jié)流和函數(shù)防抖問(wèn)題分析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論