vue 中使用节流和防抖

今天事情比较少，就特意研究了下在vue中如何使用节流和防抖，还有节流防抖我真的是傻傻的分不清楚，不知道什么时候使用节流，什么时候使用防抖…

1. 节流-方法1

在 utils.js 文件里面加入下面的方法

// 节流
export function _throttle(fn, wait = 200) {
  let last, timer,now;
  return function() {
    now = Date.now();
    if (last && now - last < wait) {
      clearTimeout(timer);
      timer = setTimeout(function() {
        last = now;
        fn.call(this, ...arguments);
      }, wait);
    } else {
      last = now;
      fn.call(this, ...arguments);
    }
  };
}

2. 防抖

// 防抖
export function _debounce(fn, wait = 200) {
  let timer;
    return function () {
      let context = this;
      let args = arguments;
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context, args);
      }, wait)
    }
}

3. 组件中使用

import { _debounce, _throttle } from '@/assets/scripts/utils';

initQuery: _throttle(function() {
     // 要做的事情
}, 2000)

initQuery: _debounce(function() {
     // 要做的事情
}, 2000)

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
应用：因为防抖的特性，一直执行最后一次的触发，所以可以用于鼠标移动确定最后一次移动的时候的坐标位置。
输入框的模糊搜索
节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
应用：因为节流是监听到第一次触发事件后就执行，所以可以用来防止按钮多次点击执行多次，且按照第一次点击的事件为准