JS函数防抖

当你在输入框每输入一个字符的时候

百度都会不断的根据当下的输入给予新的提示

那么，如果有一个人打字速度非常快

输入了helloworld这个单词 只用了200ms

这是键盘事件函数被触发了10次

我们把这个称为 函数抖动

他每按下一次键盘 浏览器都会向服务器做一次查询

连续触发了10次请求，显示对这个手速特别快的人 这不是他想要的。

我们至少浪费了9次查询 增加了服务器的压力。

解决思路是这样的：

当用户按下键盘后 不要立即向服务器发起请求，

等待300ms，如果没有继续输入 说明输入内容完毕

这时候在向服务器发送请求。

就大大的避免了浪费

例子：

// 这是未做防抖处理的代码：
inputEle.addEventListener("keyup", function(e){
    //ajax(...); 发送请求到服务器  
})

// 这是做了防抖处理的代码
this.$refs.inputEle.addEventListener(
      "keyup",
      (function (e) {
        //这是一个自运行函数
        var t = null;
        return function () {
          //真正的事件函数在这里
          clearTimeout(t); //每次触发，都把前面的定时器关闭，尽管第一次定时器并不存在
          t = setTimeout(function () {
            //开启新的定时器
            //ajax(...); 发送请求到服务器
            console.log("抖动");
          }, 300);
        };
      })()
    );

  },

都有哪些应用场景？

1. search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2. window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

补充： 在vue提交表单时使用

/* common.js */
// 防抖
export const Debounce = (fn, t) => {
    let delay = t || 500
    let timer
    return function () {
        let args = arguments;
        if (timer) {
            clearTimeout(timer)
        }

        let callNow = !timer

        timer = setTimeout(() => {
            timer = null
        }, delay)

        if (callNow) fn.apply(this, args)
    }
}


import {
 Debounce
 } from '@/utils/common.js';
onSubmit: Debounce(function() {
    let paramsData = {
        ...this.formList,
        authorization: this.token
    }
    // console.log('提交代码2222', paramsData)
    const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
    });
    let that = this;
    saveGlxx(paramsData).then((res) => {
        toast.clear() //清除加载效果
        if (res.success == true) {
            that.formList = Object.assign({}, that.formList, that.$options.data().formList)
            Toast.success('提交成功');
        }
    })
    .catch((err) => {
        Toast.fail('系统异常，请稍后再试！');
    })
}, 1000),