Vue中怎麼對事件進行防手震和節流操作？-Vue.js-PHP中文網

首頁

web前端

Vue.js

Vue中怎麼對事件進行防手震和節流操作？

青灯夜游

Oct 13, 2020 pm 12:01 PM

htmljavascriptvue.js

Vue中怎麼對事件進行防手震和節流操作？

有些瀏覽器事件可以在短時間內快速觸發多次，例如調整視窗大小或向下捲動頁面。例如，監聽頁面視窗捲動事件，而且使用者持續快速地向下捲動頁面，那麼捲動事件可能會在 3 秒內觸發數千次，這可能會導致一些嚴重的效能問題。

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

Throttle：第一個人說了算

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

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

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

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

對應到實際的互動上是一樣一樣的：每當使用者觸發了一次 scroll 事件，我們就會為這個觸發操作開啟計時器。一段時間內，後續所有的 scroll 事件都會被當作「一輛車的乘客」——它們無法觸發新的 scroll 回調。直到「一段時間」到了，第一次觸發的 scroll 事件對應的回調才會執行，而「一段時間內」觸發的後續的 scroll 回調都會被節流閥無視掉。

現在一起實作一個throttle：

// fn是我们需要包装的事件回调, interval是时间间隔的阈值
function throttle(fn, interval) {
  // last为上一次触发回调的时间
  let last = 0
  
  // 将throttle处理结果当作函数返回
  return function () {
      // 保留调用时的this上下文
      let context = this
      // 保留调用时传入的参数
      let args = arguments
      // 记录本次触发回调的时间
      let now = +new Date()
      
      // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
      if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
          last = now;
          fn.apply(context, args);
      }
    }
}

// 用throttle来包装scroll的回调
const better_scroll = throttle(() => console.log(&#39;触发了滚动事件&#39;), 1000)

Debounce：最後一個人說了算

防手震的中心思想在於：我會等你到底。在某段時間內，不管你觸發了多少次回調，我都只認最後一次。

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

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

現在一起實作一個debounce：

// fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间
function debounce(fn, delay) {
  // 定时器
  let timer = null
  
  // 将debounce处理结果当作函数返回
  return function () {
    // 保留调用时的this上下文
    let context = this
    // 保留调用时传入的参数
    let args = arguments

    // 每次事件被触发时，都去清除之前的旧定时器
    if(timer) {
        clearTimeout(timer)
    }
    // 设立新定时器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

// 用debounce来包装scroll的回调
const better_scroll = debounce(() => console.log(&#39;触发了滚动事件&#39;), 1000)

用Throttle 來最佳化Debounce

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

為了避免弄巧成拙，我們需要藉力throttle 的思想，打造一個「有底線」的debounce——等你可以，但我有我的原則：delay 時間內，我可以為你重新生成定時器；但只要delay的時間到了，我必須要給用戶一個回應。這個throttle 與debounce 「合體」思路，已經被很多成熟的前端函式庫應用到了它們的加強版throttle 函數的實作中：

// fn是我们需要包装的事件回调, delay是时间间隔的阈值
function throttle(fn, delay) {
  // last为上一次触发回调的时间, timer是定时器
  let last = 0, timer = null
  // 将throttle处理结果当作函数返回
  
  return function () { 
    // 保留调用时的this上下文
    let context = this
    // 保留调用时传入的参数
    let args = arguments
    // 记录本次触发回调的时间
    let now = +new Date()
    
    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if (now - last < delay) {
    // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
       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(&#39;触发了滚动事件&#39;), 1000)

document.addEventListener(&#39;scroll&#39;, better_scroll)

在Vue 裡使用lodash 中的Debouncing 和Throttling

事件节流和防抖是提高性能或降低网络开销的好方法。虽然 Vue 1曾经支持对事件的节流和防抖，但是在Vue 2中为了保持核心的简单性，删除对事件的节流和防抖的支持。因此，在Vue 2对对事件进行防抖和节流我们可以使用 lodash 来做。

安装

可以通过 yarn 或 npm 安装 lodash。

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

注意：如果我们不想导入lodash的所有内容，而只导入所需的部分，则可以通过一些Webpack构建自定义来解决问题。还可以使用lodash.throttle和lodash.debounce等软件包分别安装和导入lodash的各个部分。

throttling 方法

要对事件进行节流处理方法非常简单，只需将要调用的函数包装在lodash的_.throttle函数中即可。

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

<script>
import _ from &#39;lodash&#39;

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

debouncing 方法

尽管节流在某些情况下很有用，但一般情况我们经常使用的是防抖。防抖实质上将我们的事件分组在一起，并防止它们被频繁触发。要在Vue组件中使用节流，只需将要调用的函数包装在lodash的_.debounce函数中。

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

<script>
import _ from &#39;lodash&#39;

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

参考: