vue封装防抖函数及应用

防抖简单理解（debounce）：当有高频触发事件时，n秒后只执行一次，n秒内再次触发重新计时

例如输入框change事件会调多次接口，点击事件重复触发事件..

utils.js 封装

// 防抖
export function debounce(fn, delay = 500) {
  let timer = null
  return function () {
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, [...args])
    }, delay)
  }
}

可能要注意的地方：

1.最好用箭头函数

2.arguments为参数，数组形式的，展开运算符可以变为正常传参

3.delay时间根据需求更改

vue组件实际运用

1.引用

import { debounce } from '@/utils/utils.js'

2.methods相关方法添加防抖

methods: {
  //change(data){
     // 原来的样子
  //}，
   change: debounce(function(data){
     // 加防抖的写法
     // data就是接受的参数，如果不写展开运算符这里就是数组，会有问题
   })
}