函數(shù)的節(jié)流與防抖

1、節(jié)流

節(jié)流的意思是，規(guī)定時間內(nèi)，只觸發(fā)一次。比如我們設(shè)定500ms，在這個時間內(nèi)，無論點(diǎn)擊按鈕多少次，它都只會觸發(fā)一次。具體場景可以是搶購時候，由于有無數(shù)人 快速點(diǎn)擊按鈕，如果每次點(diǎn)擊都發(fā)送請求，就會給服務(wù)器造成巨大的壓力，但是我們進(jìn)行節(jié)流后，就會大大減少請求的次數(shù)。

2、防抖

防抖的意思是，在連續(xù)的操作中，無論進(jìn)行了多長時間，只有某一次的操作后在指定的時間內(nèi)沒有再操作，這一次才被判定有效。具體場景可以搜索框輸入關(guān)鍵字過程中實(shí)時 請求服務(wù)器匹配搜索結(jié)果，如果不進(jìn)行處理，那么就是輸入框內(nèi)容一直變化，導(dǎo)致一直發(fā)送請求。如果進(jìn)行防抖處理，結(jié)果就是當(dāng)我們輸入內(nèi)容完成后，一定時間(比如500ms)沒有再 輸入內(nèi)容，這時再觸發(fā)請求。

//防抖
export const debounce = (() => {
  let timer = null
  return (callback, wait = 200) => {
    timer&&clearTimeout(timer)
    timer = setTimeout(callback, wait)
  }
})()
/*xxx.vue中使用
methods: {
  loadList() {
    debounce(() => {
      console.log('加載數(shù)據(jù)')
    }, 500)
  }
}
*/
// 節(jié)流
export const throttle = (() => {
  let last = 0
  return (callback, wait = 200) => {
    let now = +new Date()
    if (now - last > wait) {
      callback()
      last = now
    }
  }
})()

函數(shù)防抖和函數(shù)節(jié)流及其使用場景

1、為什么會使用到函數(shù)防抖和函數(shù)節(jié)流

我們在平時代碼的開發(fā)過程中，會有很多場景會頻繁觸發(fā)事件，比如說搜索框?qū)崟r發(fā)請求，onmousemove, resize, onscroll等等，有些時候，我們并不想頻繁觸發(fā)事件，這時候就可以用到函數(shù)防抖和函數(shù)節(jié)流。

2、什么是函數(shù)防抖和函數(shù)節(jié)流?

函數(shù)防抖：如果一個事件被頻繁執(zhí)行多次，并且觸發(fā)的時間間隔過短，則防抖函數(shù)可以使得對應(yīng)的事件處理函數(shù)，只執(zhí)行最后觸發(fā)的一次。函數(shù)防抖可以把多個順序的調(diào)用合并成一次。

函數(shù)節(jié)流：如果一個事件被頻繁觸發(fā)多次，節(jié)流函數(shù)可以按照固定的頻率去執(zhí)行相應(yīng)的事件處理方法。函數(shù)節(jié)流保證一個事件一定事件內(nèi)只能執(zhí)行一次。

函數(shù)防抖（debounce）

• 單位時間內(nèi)，頻繁觸發(fā)事件，只會觸發(fā)最后一次
• 經(jīng)典應(yīng)用場景 ： 輸入框輸入事件
• 減少觸發(fā)輸入的頻率，提高代碼性能

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

• 函數(shù)節(jié)流 : 單位時間內(nèi)，頻繁觸發(fā)事件，只會觸發(fā)一次
• 經(jīng)典應(yīng)用場景 ：降低高頻事件觸發(fā)頻率
• 滾動條事件：onscroll 鼠標(biāo)移動：onmousemove

函數(shù)防抖流程 ：

• (1) 聲明全局變量記錄本次觸發(fā)時間
• (2) 每一次觸發(fā)事件, 獲取當(dāng)前時間  
• (3) 判斷 當(dāng)前時間-上一次觸發(fā)時間>=節(jié)流間隔時間
• (4) 存儲本次觸發(fā)事件，用于下一次判斷

3、代碼

函數(shù)防抖

//函數(shù)防抖使用場景：【永遠(yuǎn)在執(zhí)行最后一次】  回到頂部，立即（實(shí)時）搜索

    // debounce()  函數(shù)進(jìn)入頁面立即執(zhí)行

    // debounce()  必須返回函數(shù)  事件只能調(diào)用函數(shù)

而它的效果如下圖

沒有加防抖的話，鼠標(biāo)進(jìn)行滑動時一直變化，也一直調(diào)用，運(yùn)行壓力大。加了防抖后，鼠標(biāo)滑動不會調(diào)用，當(dāng)滑動停止，則調(diào)用一次，大大降低了運(yùn)行壓力。

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

//  所有的數(shù)據(jù)請求【按鈕】  下拉刷新

 而它的效果圖如下

只要滑動事件出現(xiàn)，就會每1.5秒調(diào)用一次

總結(jié)

1. 相同點(diǎn)：

• 都可以通過使用setTimeout或者時間戳實(shí)現(xiàn)。
• 目的都是，降低回調(diào)執(zhí)行頻率，節(jié)省計算資源。

2. 不同點(diǎn)：

• 函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，關(guān)注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次。
• 函數(shù)節(jié)流，在一段連續(xù)操作中，每一段時間只執(zhí)行一次，側(cè)重于一段時間內(nèi)只執(zhí)行一次。

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論