這篇文章主要介紹了Vue中如何對事件進行防抖和節(jié)流操作，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司專業(yè)IDC數(shù)據(jù)服務器托管提供商，專業(yè)提供成都服務器托管，服務器租用，移動服務器托管，移動服務器托管，成都多線服務器托管等服務器托管服務。

有些瀏覽器事件可以在短時間內快速觸發(fā)多次，比如調整窗口大小或向下滾動頁面。例如，監(jiān)聽頁面窗口滾動事件，并且用戶持續(xù)快速地向下滾動頁面，那么滾動事件可能在 3 秒內觸發(fā)數(shù)千次，這可能會導致一些嚴重的性能問題。

如果在面試中討論構建應用程序，出現(xiàn)滾動、窗口大小調整或按下鍵等事件請務必提及 防抖(Debouncing) 和 函數(shù)節(jié)流（Throttling）來提升頁面速度和性能。這兩兄弟的本質都是以閉包的形式存在。通過對事件對應的回調函數(shù)進行包裹、以自由變量的形式緩存時間信息，最后用 setTimeout 來控制事件的觸發(fā)頻率。

Throttle： 第一個人說了算

throttle 的中心思想在于：在某段時間內，不管你觸發(fā)了多少次回調，我都只認第一次，并在計時結束時給予響應。

先給大家講個小故事：現(xiàn)在有一個旅客剛下了飛機，需要用車，于是打電話叫了該機場的一輛機場大巴來接。司機開到機場，心想來都來了，多接幾個人一起走吧，這樣這趟才跑得值——我等個十分鐘看看。于是司機一邊打開了計時器，一邊招呼后面的客人陸陸續(xù)續(xù)上車。在這十分鐘內，后面下飛機的乘客都只能乘這一輛大巴，十分鐘過去后，不管后面還有多少沒擠上車的乘客，這班車都必須發(fā)走。

在這個故事里，“司機” 就是我們的節(jié)流閥，他控制發(fā)車的時機；“乘客”就是因為我們頻繁操作事件而不斷涌入的回調任務，它需要接受“司機”的安排；而“計時器”，就是我們上文提到的以自由變量形式存在的時間信息，它是“司機”決定發(fā)車的依據(jù)；最后“發(fā)車”這個動作，就對應到回調函數(shù)的執(zhí)行。

總結下來，所謂的“節(jié)流”，是通過在一段時間內無視后來產(chǎn)生的回調請求來實現(xiàn)的。只要一位客人叫了車，司機就會為他開啟計時器，一定的時間內，后面需要乘車的客人都得排隊上這一輛車，誰也無法叫到更多的車。

對應到實際的交互上是一樣一樣的：每當用戶觸發(fā)了一次 scroll 事件，我們就為這個觸發(fā)操作開啟計時器。一段時間內，后續(xù)所有的 scroll 事件都會被當作“一輛車的乘客”——它們無法觸發(fā)新的 scroll 回調。直到“一段時間”到了，第一次觸發(fā)的 scroll 事件對應的回調才會執(zhí)行，而“一段時間內”觸發(fā)的后續(xù)的 scroll 回調都會被節(jié)流閥無視掉。

現(xiàn)在一起實現(xiàn)一個 throttle：

// fn是我們需要包裝的事件回調, interval是時間間隔的閾值
function throttle(fn, interval) {
  // last為上一次觸發(fā)回調的時間
  let last = 0
  
  // 將throttle處理結果當作函數(shù)返回
  return function () {
      // 保留調用時的this上下文
      let context = this
      // 保留調用時傳入的參數(shù)
      let args = arguments
      // 記錄本次觸發(fā)回調的時間
      let now = +new Date()
      
      // 判斷上次觸發(fā)的時間和本次觸發(fā)的時間差是否小于時間間隔的閾值
      if (now - last >= interval) {
      // 如果時間間隔大于我們設定的時間間隔閾值，則執(zhí)行回調
          last = now;
          fn.apply(context, args);
      }
    }
}

// 用throttle來包裝scroll的回調
const better_scroll = throttle(() => console.log('觸發(fā)了滾動事件'), 1000)

Debounce： 最后一個人說了算

防抖的中心思想在于：我會等你到底。在某段時間內，不管你觸發(fā)了多少次回調，我都只認最后一次。

繼續(xù)講司機開車的故事。這次的司機比較有耐心。第一個乘客上車后，司機開始計時（比如說十分鐘）。十分鐘之內，如果又上來了一個乘客，司機會把計時器清零，重新開始等另一個十分鐘（延遲了等待）。直到有這么一位乘客，從他上車開始，后續(xù)十分鐘都沒有新乘客上車，司機會認為確實沒有人需要搭這趟車了，才會把車開走。

我們對比 throttle 來理解 debounce：在throttle的邏輯里，“第一個人說了算”，它只為第一個乘客計時，時間到了就執(zhí)行回調。而 debounce 認為，“最后一個人說了算”，debounce 會為每一個新乘客設定新的定時器。

現(xiàn)在一起實現(xiàn)一個 debounce：

// fn是我們需要包裝的事件回調, delay是每次推遲執(zhí)行的等待時間
function debounce(fn, delay) {
  // 定時器
  let timer = null
  
  // 將debounce處理結果當作函數(shù)返回
  return function () {
    // 保留調用時的this上下文
    let context = this
    // 保留調用時傳入的參數(shù)
    let args = arguments

    // 每次事件被觸發(fā)時，都去清除之前的舊定時器
    if(timer) {
        clearTimeout(timer)
    }
    // 設立新定時器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

// 用debounce來包裝scroll的回調
const better_scroll = debounce(() => console.log('觸發(fā)了滾動事件'), 1000)

用 Throttle 來優(yōu)化 Debounce

debounce 的問題在于它“太有耐心了”。試想，如果用戶的操作十分頻繁——他每次都不等 debounce 設置的 delay 時間結束就進行下一次操作，于是每次 debounce 都為該用戶重新生成定時器，回調函數(shù)被延遲了不計其數(shù)次。頻繁的延遲會導致用戶遲遲得不到響應，用戶同樣會產(chǎn)生“這個頁面卡死了”的觀感。

為了避免弄巧成拙，我們需要借力 throttle 的思想，打造一個“有底線”的 debounce——等你可以，但我有我的原則：delay 時間內，我可以為你重新生成定時器；但只要delay的時間到了，我必須要給用戶一個響應。這個 throttle 與 debounce “合體”思路，已經(jīng)被很多成熟的前端庫應用到了它們的加強版 throttle 函數(shù)的實現(xiàn)中：

// fn是我們需要包裝的事件回調, delay是時間間隔的閾值
function throttle(fn, delay) {
  // last為上一次觸發(fā)回調的時間, timer是定時器
  let last = 0, timer = null
  // 將throttle處理結果當作函數(shù)返回
  
  return function () { 
    // 保留調用時的this上下文
    let context = this
    // 保留調用時傳入的參數(shù)
    let args = arguments
    // 記錄本次觸發(fā)回調的時間
    let now = +new Date()
    
    // 判斷上次觸發(fā)的時間和本次觸發(fā)的時間差是否小于時間間隔的閾值
    if (now - last < delay) {
    // 如果時間間隔小于我們設定的時間間隔閾值，則為本次觸發(fā)操作設立一個新的定時器
       clearTimeout(timer)
       timer = setTimeout(function () {
          last = now
          fn.apply(context, args)
        }, delay)
    } else {
        // 如果時間間隔超出了我們設定的時間間隔閾值，那就不等了，無論如何要反饋給用戶一次響應
        last = now
        fn.apply(context, args)
    }
  }
}

// 用新的throttle包裝scroll的回調
const better_scroll = throttle(() => console.log('觸發(fā)了滾動事件'), 1000)

document.addEventListener('scroll', better_scroll)

在 Vue 里使用 lodash 中的 Debouncing 和 Throttling

事件節(jié)流和防抖是提高性能或降低網(wǎng)絡開銷的好方法。雖然 Vue 1曾經(jīng)支持對事件的節(jié)流和防抖，但是在Vue 2中為了保持核心的簡單性，刪除對事件的節(jié)流和防抖的支持。因此，在Vue 2對對事件進行防抖和節(jié)流我們可以使用lodash 來做。

安裝

可以通過 yarn 或 npm 安裝 lodash。

# Yarn
$ yarn add lodash
# NPM
$ npm install lodash --save

注意：如果我們不想導入lodash的所有內容，而只導入所需的部分，則可以通過一些Webpack構建自定義來解決問題。 還可以使用lodash.throttle和lodash.debounce等軟件包分別安裝和導入lodash的各個部分。

throttling 方法

要對事件進行節(jié)流處理方法非常簡單，只需將要調用的函數(shù)包裝在lodash的_.throttle函數(shù)中即可。

<template>
  <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    throttledMethod: _.throttle(() => {
      console.log('I get fired every two seconds!')
    }, 2000)
  }
}
</script>

debouncing 方法

盡管節(jié)流在某些情況下很有用，但一般情況我們經(jīng)常使用的是防抖。 防抖實質上將我們的事件分組在一起，并防止它們被頻繁觸發(fā)。 要在Vue組件中使用節(jié)流，只需將要調用的函數(shù)包裝在lodash的_.debounce函數(shù)中。

<template>
  <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    throttledMethod: _.debounce(() => {
      console.log('I only get fired once every two seconds, max!')
    }, 2000)
  }
}
</script>

感謝你能夠認真閱讀完這篇文章，希望小編分享Vue中如何對事件進行防抖和節(jié)流操作內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設公司，，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設公司，，詳細的解決方法等著你來學習!

分享題目：Vue中如何對事件進行防抖和節(jié)流操作-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://m.newbst.com/article28/dpeijp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網(wǎng)站建設、網(wǎng)站制作、網(wǎng)站排名、小程序開發(fā)、網(wǎng)站內鏈

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)