Vue的防抖與節(jié)流

首先我們先看一下防抖和節(jié)流的定義。

防抖：在同一時間段執(zhí)行多次,但是只在最后一次有效（執(zhí)行）；每次觸發(fā)函數(shù)清除掉原來的定時器，重新開始計時。如果在規(guī)定時間內(nèi)不再觸發(fā)函數(shù)，則執(zhí)行，否則，清除掉之前的定時器，重新計時。
節(jié)流：在一段時間內(nèi)，只能觸發(fā)一次函數(shù)。

今天突然發(fā)現(xiàn)了一個問題，做搜索效果時每輸入一個字母或者數(shù)字，都會立刻請求一次，如果輸入量過大可能會對服務(wù)器造成影響，并且點擊刷新時，會立刻請求三次，原因是使用了watch監(jiān)聽，但是沒有使用防抖函數(shù)，現(xiàn)在把防抖函數(shù)加入到代碼中。

我在外部建立了名為config的js文件，在其中構(gòu)建了防抖和節(jié)流函數(shù)，這里以防抖函數(shù)為例。

使用如下代碼引入

import { debounce } from '@/untils/config.js'

方法代碼如下

這里的function是第一個參數(shù)，200是第二個參數(shù)，為計時器時間，可以根據(jù)需要來修改。

這里踩了一個坑，雖然requestTable后面沒有了“(){}”，但它還是一個方法，所以調(diào)用的時候依然需要加().

如

this.requestTable()

節(jié)流函數(shù)可依照以上方法來實現(xiàn)，只需要改一個方法名，因為所需要的參數(shù)是一樣的。