防抖和節(jié)流的目的都是為了減少不必要的計算，不浪費資源，只在適合的時候再進行觸發(fā)計算。

一、函數(shù)防抖

定義在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時；典型的案例就是輸入搜索：輸入結(jié)束后n秒才進行搜索請求，n秒內(nèi)又輸入的內(nèi)容，就重新計時。

實現(xiàn)原理函數(shù)防抖的基本思想是設(shè)置一個定時器，在指定時間間隔內(nèi)運行代碼時清楚上一次的定時器，并設(shè)置另一個定時器，知道函數(shù)請求停止并超過時間間隔才會執(zhí)行。

使用場景文本框輸入搜索（連續(xù)輸入時避免多次請求接口）

代碼實現(xiàn)

/** * 函數(shù)防抖 */export function debounce(fn, delay) { // 記錄上一次的延時器 var timer = null; var delay = delay || 200; return function() { var args = arguments; var that = this; // 清除上一次延時器 clearTimeout(timer) timer = setTimeout(function() { fn.apply(that,args) }, delay); }}

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

定義規(guī)定在一個單位時間內(nèi)，只能觸發(fā)一次函數(shù)，如果這個單位時間內(nèi)觸發(fā)多次函數(shù)，只有一次生效； 典型的案例就是鼠標(biāo)不斷點擊觸發(fā)，規(guī)定在n秒內(nèi)多次點擊只有一次生效。

實現(xiàn)原理其原理是用時間戳來判斷是否已到回調(diào)該執(zhí)行時間，記錄上次執(zhí)行的時間戳，然后每次觸發(fā) scroll 事件執(zhí)行回調(diào)，回調(diào)中判斷當(dāng)前時間戳距離上次執(zhí)行時間戳的間隔是否已經(jīng)到達 規(guī)定時間段，如果是，則執(zhí)行，并更新上次執(zhí)行的時間戳，

使用場景

resize、scroll、mousemove等事件觸發(fā)監(jiān)聽

代碼實現(xiàn)

/** * 函數(shù)節(jié)流 */export function throttle(fn,delay){ var lastTime; var timer; var delay = delay || 200; return function() { var args = arguments; // 記錄當(dāng)前函數(shù)觸發(fā)的時間 var nowTime = Date.now(); if (lastTime && nowTime - lastTime < delay) { clearTimeout(timer); timer = setTimeout(function () { // 記錄上一次函數(shù)觸發(fā)的時間 lastTime = nowTime; // 修正this指向問題 fn.apply(this, args); }, delay); }else{ lastTime = nowTime; fn.apply(this, args); } }}

三、在Vue中使用函數(shù)防抖實現(xiàn)輸入框搜索

效果圖如下

新建common.js文件

/** * 函數(shù)防抖 */export function debounce(fn, delay) { // 記錄上一次的延時器 var timer = null; var delay = delay || 200; return function() { var args = arguments; var that = this; // 清除上一次延時器 clearTimeout(timer) timer = setTimeout(function() { fn.apply(that,args) }, delay); }}

在vue組件中引入

import {debounce} from ’@/utils/common.js’

在組件中使用

<div class='white-search-bar'> <div class='search-bar-item'> <span class='iconfont icon-search'></span> <input : type='text' maxlength='8' placeholder='應(yīng)用搜索' v-model='keyword' @keyup='appSearch' @focus='onSearchFocus' @blur='onSearchBlur'> </div> <span @click='appSearchCancel' v-if='isSearchFocus'>取消</span> </div>methods:{appSearch:debounce(function(){ this.getAppList() },300)}

參考閱讀

https://www.jqhtml.com/20268.html

到此這篇關(guān)于Vue中函數(shù)防抖節(jié)流的理解及應(yīng)用實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 函數(shù)防抖節(jié)流內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！