vue 搜索框实现防抖调接口

satuo@

于 2024-04-17 16:11:15 发布

阅读量173

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/a1783118/article/details/137876610

版权

vue 搜索框实现防抖调接口

首先在html中输入一个input框

<el-input v-model="search"  @input="inputSearch()"  ></el-input>

在 js 中写入下面方法

inputSearch(status) {
	this.debounce(this.debounceInputSearch, 1000)
},
debounce(func, wait = 500, immediate = false) {
// 清除定时器
   if (this.timeout !== null) clearTimeout(this.timeout)
   // 立即执行，此类情况一般用不到
   if (immediate) {
     var callNow = !this.timeout
     this.timeout = setTimeout(function() {
       this.timeout = null
     }, wait)
     if (callNow) typeof func === 'function' && func.apply(this, arguments)
   } else {
     // 设置定时器，当最后一次操作后，this.timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
     this.timeout = setTimeout(() => {
       typeof func === 'function' && func.apply(this, arguments)
     }, wait)
   }
 },
 // 最终想执行的内容
async debounceInputSearch() {
	await getVisual()
},