el-input防抖节流

el-input防抖节流

新建src/utils/debounceModule.js。

// 节流
export function throttleFun(fn, wait = 500) {
    let last, now
    return function () {
        now = Date.now()
        if (last && now - last < wait) {
            last = now
        } else {
            last = now
            fn.call(this, ...arguments)
        }
    }
}
 
// 防抖
export function debounceFun(fn, wait = 500) {
    let timer
    return function () {
        let context = this
        let args = arguments
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(context, args)
        }, wait)
    }
}

使用src/utils/debounceModule.js。

 <el-input
        placeholder="请输入关键词..."
        prefix-icon="el-icon-search"
        v-model="search"
      >
      </el-input>
 
import { debounceFun, throttleFun } from "@/utils/debounceModule";
// 监听搜索框内容的变化，等输入完成才会执行搜索函数(防抖)
 watch: {
    search: debounceFun(function (newData, oldData) {
        console.log(newData, oldData)
    })
  },
// 搜索，短时间内连续点击搜索按钮只执行一次搜索函数(节流)
// searchBtn: throttleFun(function() {
//     if (this.searchValue) {
//         this.getList()
//     }
// }),
 
methods: {
//可绑定自定义事件 诸如@keyup.native="onInput()"进行监听
    onInput: debounceFun(function () {
      let ak = '百度地图ak'
      let url = `/place/v2/suggestion?query=${this.searchText}&region=中国&city_limit=false&output=json&ak=${ak}`
      this.$axios.get(url).then(res => {
        this.restaurants = res.data.result
      })
    }, 1000),
 
}