Vue中函数防抖节流的理解及应用实现

// 记录上一次的延时器
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="应用搜索" 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)
}

参考阅读

函数节流和防抖

到此这篇关于Vue中函数防抖节流的理解及应用实现的文章就介绍到这了,更多相关Vue 函数防抖节流内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！