今天使用節(jié)流函數(shù)的時(shí)候遇見了一個(gè)問題，搞了半天才找到原因，所以在這里做個(gè)總結(jié)。

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

瀏覽器的一些事件，如：resize，scroll，mousemove等。這些事件觸發(fā)頻率太過頻繁，綁定在這些事件上的回調(diào)函數(shù)會(huì)不停的被調(diào)用，加重瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗(yàn)非常糟糕。所以先賢們發(fā)明了節(jié)流函數(shù)，簡單版本如下：

function throttle (f, wait = 200) { let last = 0 return function (...args) { let now = Date.now() if (now - last > wait) { last = now f.apply(this, args) } }}

假設(shè)有一個(gè) vue 組件 svgMark。這個(gè)組件中渲染的元素要在頁面窗口大小發(fā)生變化時(shí)重繪 reDraw ，而重繪時(shí)要使用節(jié)流函數(shù)防止性能損耗。正常情況下代碼如下：

<template> <div>{{ index }}</div></template><script>import { throttle } from ’lodash’export default { name: ’SvgMark’, data() { return { index: 0 } }, mounted() { window.addEventListener(’resize’, this.reDraw) }, beforeDestroy() { window.removeEventListener(’resize’, this.reDraw) }, methods: { reDraw: throttle(function() { this.index++ }, 500) }}</script></script>

一般情況下這樣用沒什么問題。但是有這樣一個(gè)場景，使用節(jié)流函數(shù)時(shí)卻失效了，即當(dāng)這個(gè)組件被 v-for 循環(huán)加載了很多次：

<template> <div> <svgMark v-for='item in 10' :key='item.id' /> </div></template>

這個(gè)時(shí)候無論渲染了多少個(gè) svgMark 組件，在窗口大小改變的時(shí)候卻只觸發(fā)了第一個(gè)組件和第 n 割組件的重繪，為什么其他組件沒有觸發(fā)呢？這就要從頭說起了。

節(jié)流函數(shù)在初始化的時(shí)候產(chǎn)生了一個(gè)閉包，閉包內(nèi)保存了變量 last ，這個(gè) last 記錄了上一次執(zhí)行 f 函數(shù)的時(shí)間。而當(dāng)下一次觸發(fā)節(jié)流函數(shù)的時(shí)候，如果此時(shí)時(shí)間 now 減去上次時(shí)間 last 小于了我們規(guī)定的節(jié)流時(shí)間 wait ，那么函數(shù) f 將不會(huì)執(zhí)行。

很顯然，第一個(gè)子組件在觸發(fā)節(jié)流函數(shù)的時(shí)候產(chǎn)生了一個(gè) last，而第二個(gè)組件在觸發(fā)節(jié)流函數(shù)時(shí)候的時(shí)產(chǎn)生的 now 并沒有滿足 now - last > wait 的條件，所以沒有執(zhí)行重繪代碼。而到了第 n 個(gè)組件觸發(fā)節(jié)流函數(shù)的時(shí)候，滿足了 now - last > wait 的條件所以重繪成功了。

vue 組件在代碼編譯的階段，組件 svgMark 中的方法 reDraw: throttle(function() { this.index++ }, 500) 就已經(jīng)被編譯成了類似如下函數(shù)：

reDraw: ƒ (...args) { let now = Date.now() if (now - last > wait) { last = now f.apply(this, args) }}

由于函數(shù)是引用類型，所有使用子組件 svgMark 的 methods 中的 reDraw 都指向了同一個(gè)內(nèi)存地址，也就是說所有子組件的 reDraw 方法都是同一個(gè)函數(shù)。

因?yàn)樗薪M件都公用了同一個(gè)節(jié)流函數(shù)，當(dāng)然就會(huì)產(chǎn)生節(jié)流了。那怎么解決問題呢？對癥下藥就要讓每個(gè)組件產(chǎn)生自己的節(jié)流函數(shù)，而不產(chǎn)生共用。代碼如下

子組件：

<template> <div>{{ index }}</div></template><script>import { throttle } from ’lodash’export default { name: ’SvgMark’, data() { return { index: 0 } }, mounted() { this.reDraw = throttle(() => { this.index++ }, 500) window.addEventListener(’resize’, this.reDraw) }, beforeDestroy() { window.removeEventListener(’resize’, this.reDraw) }}</script>

我們在 mounted 聲明周期函數(shù)中手動(dòng)聲明了 reDraw 函數(shù)替代 methods 中的 reDraw ，這樣在每個(gè)組件初始化的時(shí)候都會(huì)產(chǎn)生一個(gè)自己的節(jié)流函數(shù)了。需要注意此時(shí)節(jié)流函數(shù)的參數(shù)使用了箭頭函數(shù)，因?yàn)檫@樣 this 才會(huì)指向組件實(shí)例。

以上就是節(jié)流函數(shù)帶給我的坑，現(xiàn)在分享給大家。[下班][鼓掌]

以上就是vue組件中節(jié)流函數(shù)的失效和解決方法的詳細(xì)內(nèi)容，更多關(guān)于vue 組件節(jié)流函數(shù)的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！