vue使用防抖节流（提交表单、实时搜索）

1、封装防抖节流方法

deTh.js
/**
 * 闭包函数
 * 
 * 防抖：对于短时间内连续触发的事件（滚动事件、表单重复提交、页面resize事件，常见于需要做页面适配的时候），让某个时间期限内，事件处理函数只执行一次。
 * 节流：对于短时间内大量触发同一事件（滚动事件、输入框实时搜索），那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效
 */
 export default {
  // 防抖
  debounce: function (fn, delay) {
    // 时间期限
    var delay = delay || 200;
    var timer;
    // 闭包
    return function () {
      // 考虑作用域，上下文环境，apply需要用到this对象
      var th = this;
      // 接收的参数用 ES6 中的 rest 参数统一存储到变量 args 中。arguments就是传入的参数数组,而且个数可以不确定的传回给fn（不确定函数到底有多少个参数，用arguments来接收）
      var args = arguments;
      // 判断还在定时，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function () {
        timer = null;
        // 执行方法
        fn.apply(th, args);
      }, delay);
    };
  },
  // 节流 定时器 + 时间戳
  throttle: function(func, delay) {
    var timer = null
    var startTime = Date.now()
    return function() {
      // 结束时间
      var curTime = Date.now()
      // 间隔时间 = 延迟的时间 - （结束时间戳 - 开始时间戳）
      var interval = delay - (curTime - startTime)
      var th = this
      var args = arguments
      clearTimeout(timer)
      if(interval <= 0) {
        // 证明可以触发了
        func.apply(th, args)
        // 重新计算开始时间
        startTime = Date.now()
      } else {
        // 继续等待
        timer = setTimeout(func, interval)
      }
    }
  }
}

2、组件中引入

test.vue
import handleDt from "../plugin/deTh/deTh";

3、组件中使用(表单提交、实时搜索)

html
<div>
  9、防抖
  <button @click="handleDe">防抖（频繁提交表单）</button>
</div>
<div>
  10、节流
  <input type="text" @input="handleTh"/>
</div>
js
// 防抖（按钮点击）
handleDe: handleDt.debounce(() => {
  console.log('不管你怎么点击，我只在2s后触发事件，2s内点击我也要等到2s后再触发事件')
}, 2000),
// 节流（请求数据的方法）
getData: handleDt.throttle(() => {
  console.log('第一次请求马上触发，往后不管你怎么触发，我只在5s后请求,5s内触发我要重新计算时间的')
}, 5000),
// 输入框值改变触发
handleTh() {
  this.getData()
},

逆风的方向，更适合飞翔！