節(jié)流函數(shù)(throttle)就是讓事件處理函數(shù)在大于等于執(zhí)行周期時才能執(zhí)行,周期之內(nèi)不執(zhí)行瞻润,即事件一直被觸發(fā)吧享,那么事件將會按每小段固定時間一次的頻率執(zhí)行。
這里使用lodash庫實現(xiàn)節(jié)流廊勃,他的中文網(wǎng)站是https://www.lodashjs.com/,除了節(jié)流经窖,它還封裝了很多方法坡垫,如防抖,深拷貝等画侣,如有需要冰悠,可以詳細看一下文檔。
1配乱、查看項目是否引用了lodash庫溉卓。全局搜索lodash,如果有相關(guān)的代碼搬泥,說明引用了桑寨。
2、如果沒有搜到忿檩,用這個命令安裝西疤。?npm i --save lodash
3、再要使用的地方引入
import throttle from "lodash/throttle";
changeIndex: throttle(function (index) {
? ? ? this.currentIndex = index;
? ? }, 50)
// 本來changeIndex應該這樣寫的休溶,每次傳入index代赁,都改變currentIndex的值,加上節(jié)流之后五十毫秒改變一次currentIndex的值
changeIndex(index) {
? ? ? this.currentIndex = index;
? ? }
vue實現(xiàn)輸入框防抖
輸入框每輸入一個字符兽掰,都會發(fā)請求芭碍,用防抖可以讓請求不那么頻繁。
每輸入一個字符孽尽,inputFn都會執(zhí)行一次窖壕,先清除之前的定時器,然后在開一個定時器杉女,從最后一個字符輸入之后開始計時瞻讽,如果300毫秒之后沒有再進行輸入,就輸出輸出框的內(nèi)容熏挎。