vue防抖调研

更新：2021-12-14

防抖

/**
 * 防抖, 执行最后一次, 常用于搜索框, 窗口缩放等
 * @param {Function} fn 处理函数
 * @param {Number} wait 延迟时间
 * @returns Function
 */
const debounce = (fn, wait) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, wait);
  };
};

节流

/**
 * 节流, 执行第一次, 常用于表单防重复提交等
 * @param {Function} fn 处理函数
 * @param {Number} wait 延迟时间
 * @returns Function
 */
const throttle = (fn, wait) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        fn.apply(context, args);
        timer = null;
      }, wait);
    }
  };
};

官方推荐写法

https://v3.cn.vuejs.org/guide/data-methods.html#防抖和节流

走过的弯路

1. debounce 定义在了 methods 里面
2. <input @change="debounce(submit(xxx), 500)">
3. methods 冒号写法
4. lodash 的第四个参数 { trailing: false } 必须写

参考

1. vue-debounce-throttle (opens new window)
2. 在vue用throttle居然这么黑盒 (opens new window)