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

一、函數(shù)防抖

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

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

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

代碼實(shí)現(xiàn)

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

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

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

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

使用場(chǎng)景

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

代碼實(shí)現(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ā)的時(shí)間 var nowTime = Date.now(); if (lastTime && nowTime - lastTime < delay) { clearTimeout(timer); timer = setTimeout(function () { // 記錄上一次函數(shù)觸發(fā)的時(shí)間 lastTime = nowTime; // 修正this指向問題 fn.apply(this, args); }, delay); }else{ lastTime = nowTime; fn.apply(this, args); } }}

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

效果圖如下

新建common.js文件

/** * 函數(shù)防抖 */export function debounce(fn, delay) { // 記錄上一次的延時(shí)器 var timer = null; var delay = delay || 200; return function() { var args = arguments; var that = this; // 清除上一次延時(shí)器 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)用實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 函數(shù)防抖節(jié)流內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！