前端的防抖节流

项目开发中 我们一定遇到过如下情况,

1. 滚动条下拉一定距离时，显示top 按钮（回到顶部）
2. 用户输入信息是校验当前信息是否可用或者是否已存在

因为滚动事件和输入事件触发评率不可控，会导致请求过于频繁，相应不及时造成页面假死等现象

因为我们会想到 防抖节流操作

1. 使用定时器，只要在时间周期内有新的事件触发，就清空上次定时器，再重新触发，这种方式简单实用
2. 同样是使用定时器， 在周期内若有新事件触发时，事件开始时间指针后移，则重置定时器开始时间戳，定时器执行时，判断开始时间戳。
3. 示例代码如下

data() {
    let timer, args, startTimeStamp = 0; // 定义全局 否则在内部拿不到最新数据
    const debounce = (fn, wait) => {
      let context;
		let run = (timerInterval) => {
        timer = setTimeout(() => {
          let now = (new Date()).getTime();
          let interval = now - startTimeStamp;
          if(interval < timerInterval) {
            console.log('debounce reset')
            startTimeStamp = now;
            run(wait - interval);
          }else {
            fn.apply(context, args);
            clearTimeout(timer);
            timer = null;
          }
        }, timerInterval)
      }
      return function () {
        context = this;
        args = arguments;
        let now = (new Date()).getTime();
        startTimeStamp = now;
        if(!timer){
          run(wait)
        }
      }
    }
    const validateCompany = (rule, value, callback) =>{
      if(!value) return callback(new Error('请输入公司名称'));
        debounce(async (value) => {
          console.log('执行了')
          await this.$store.dispatch('xxx/checkCompanyName', {companyName : value}).then(res => {
            const { code, message} = res
            if(code == 1){
              callback()
            }else {
              callback(new Error(message))
            }
          }).catch(err => {
            callback(new Error(err));
          })
          callback()
        }, 2000)(value)
    }
    return {
 	 form: {
        companyName: "",//公司名称
      },
      rules: {
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          { validator: validateCompany, trigger: "change" }
        ],
    }
  },

优秀的博文参考
防抖(debounce) 和 节流(throttling)