快捷導(dǎo)航

Vue中函數(shù)防抖節(jié)流的理解及應(yīng)用實現(xiàn)

更新時間：2020年04月24日 09:29:49 作者：fozero

這篇文章主要介紹了Vue中函數(shù)防抖節(jié)流的理解及應(yīng)用實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

一、函數(shù)防抖

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

實現(xiàn)原理
函數(shù)防抖的基本思想是設(shè)置一個定時器，在指定時間間隔內(nèi)運(yùn)行代碼時清楚上一次的定時器，并設(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)到達(dá) 規(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 class="search-bar-input" :class="{'search-bar-focus':isSearchFocus}" type="text" maxlength="8" placeholder="應(yīng)用搜索" v-model="keyword" @keyup="appSearch" @focus="onSearchFocus" @blur="onSearchBlur">
    </div>
    <span class="search-bar-btn" @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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: