Vue的防抖與節(jié)流

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

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

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

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

使用如下代碼引入

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

方法代碼如下

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

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

如

this.requestTable()

節(jié)流函數(shù)可依照以上方法來(lái)實(shí)現(xiàn)，只需要改一個(gè)方法名，因?yàn)樗枰膮?shù)是一樣的。