el-input输入框的监听以及防抖节流的实现

src/utilsdebounceModule.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)
    }
}

使用

 
      

import { debounceFun, throttleFun } from "@/utils/debounceModule";
// 监听搜索框内容的变化，等输入完成才会执行搜索函数(防抖)
 watch: {
    search: debounceFun(function (newData, oldData) {
        console.log(newData, oldData)
    })
  },
// 搜索，短时间内连续点击搜索按钮只执行一次搜索函数(节流)
// searchBtn: throttleFun(function() {
//     if (this.searchValue) {
//         this.getList()
//     }
// }),