一篇彻底搞懂什么是函数防抖和节流，及应用场景

函数防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

1.防抖 (debounce)

防止抖动，以免把一次事件误执行多次，影响性能，比如敲键盘就是一个每天都会接触到的防抖操作。
应用场景

1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存
4. mousemove、mouseover鼠标移动事件防抖
5. 搜索框搜索输入。只需用户最后一次输入完，再发送请求防抖
6. 手机号、邮箱验证输入检测

举例：onmousemove事件

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

初步实现防抖函数debounce代码如下：

function debounce(fn, delay) {
   
    let timer; // 维护一个 timer
    return function () {
   
        let args = arguments;
        if (timer) {
   
            clearTimeout(timer);
        }
        timer = setTimeout(()=> {
   
            fn.apply(this, args); // 用apply指向调用debounce的对象，相当于this.fn(args);