防抖和截流

由来

• 如果短时间以很高频率触发 scroll 、resize、click 等事件（事件中涉及到大量的位置计算、DOM 操作等工作）时，会造成浏览器掉帧或者使得浏览器 CPU 使用率增加，影响浏览器性能，从而导致用户体验受到影响

防抖（debounce）

• 控制次数，函数在某段时间内只执行一次
• 生活场景
  如果一个电梯5秒后门自动关闭，如果在5秒内的任意时刻按下开门按钮，电梯门将重新等5秒，以此往复，直到这5秒内没人按开门按钮，门才会自动关闭（代码执行）
• 应用场景
  给按钮加函数防抖防止表单多次提交
  对于输入框连续输入进行 AJAX 验证 时，用函数防抖能有效减少请求次数
  判断 scroll 是否滑到底部，滚动事件 + 函数防抖

    /**
    * func 目标函数
    * delay 延迟执行毫秒数
    */
    function debounce(func, delay) {
      let timer;
      return function () {
        let context = this;
        let args = arguments;

        if (timer) {
          clearTimeout(timer);
        };
        timer = setTimeout(() => {
          func.apply(context, args);
        }, delay);
      };
    };

    function fun() {
      console.log("执行了");
    }

    window.addEventListener('mousemove', debounce(fun, 1000));

截流（throttle）

• 控制频率，函数以固定的频率执行
• 生活场景
  长途汽车站的汽车，每天固定时间（1小时）发车（代码执行），中间再怎么催也无济于事，只能等待下一班发车的时间点
• 应用场景
  游戏中的刷新率
  DOM元素 拖拽
  Canvas 画笔功能

        /**
         * 第一种写法 定时器版
         * func 目标函数
         * delay 延迟执行毫秒数
         */
        function throttle(func, delay) {
            let timer;
            return function () {
                let context = this;
                let args = arguments;

                if (timer) {
                    return;
                };
                timer = setTimeout(() => {
                    func.apply(context, args);
                    timer = null;
                }, delay);
            };
        };

        function fun() {
            console.log("执行了");
        }

        window.addEventListener('mousemove', throttle(fun, 1000));

        /** 第二种写法 间戳版
         * func 目标函数
         * delay 延迟执行毫秒数
         */
        function throttle(func, delay) {
            let previous = 0;
            return function () {
                let context = this;
                let args = arguments;
                let now = new Date();
                if (now - previous > delay) {
                    func.apply(context, args);
                    previous = now;
                }
            };
        }

        function fun() {
            console.log("执行");
        }

        window.addEventListener('mousemove', throttle(fun, 1000));

requestAnimationFrame

• rAF：16.7ms 触发一次 handler，降低了可控性，但是提升了性能和精确度