防抖与节流

1.防抖：通过setTimeout的方式，在一定的时间间隔内，将多次触发变成一次触发
2.节流：减少一段时间的触发频率

防抖

可以发现，一直点击会一直触发事件，如果这个事件为发送一个请求，那么这对与服务器来说是很不友好的。同样的请求因为用户的多次点击而多次发送请求，返回的结果和只点击一次是一样的，大大加重服务器压力和影响性能。所以，我们引入防抖的概念，简单来说，防抖就是通过setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发。
1.下面我通过seTimeout的方法解决了这一问题

var btn = document.getElementById("#btn");
        // 点击后触发trigger()函数，第一个参数为真实要执行的函数，第二个参数为定时器延迟时间
        btn.addEventListener("click", trigger(real, 1000));
        function trigger(fn, delay) {
            // 设置time为定时器，初始为 null
            var time = null;
            return function () {
                //定义一个firstClick，判断是否第一次执行，初始值为true
                var firstClick = !time;
                //第一次会立即执行
                if (firstClick) {
                    fn(...arguments);
                }
                // 如果定时器存在清空定时器
                if (time) {
                    clearTimeout(time);
                }
                // 设置定时器，此时firstClick会变为false，规定时间后time才会为null
                time = setTimeout(() => {
                    time = null;
                }, delay);
            };
        }
        //真实要执行函数
        function real(e) {
            console.log("防抖测试");
            console.log(e);
        }

节流

处理频繁事件时，固定时间内只执行一次

var btn = document.getElementById("btn");
      // 点击后触发trigger()函数，第一个参数为真实要执行的函数，第二个参数为限制时间
      btn.addEventListener("click", trigger(real, 500));
     function trigger(fn, delay) {
       // 设置bef，为上一次执行时间，初始为0
        var bef = 0;
        return function () {
        // 获取当前时间戳
          var now = new Date().getTime();
          //如果当前时间减去上次时间大于限制时间时才执行
          if (now - bef > delay) {
           // 执行函数
            fn(...arguments);
            //执行后，上次时间赋值为这次执行时间
            bef = now;
          }
        };
      }
      //真实要执行函数
      function real(e) {
        console.log("节流测试");
        console.log(e);
      }

总结

防抖就是通过setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发。节流:就是减少一段时间的触发频率。防抖与节流最大的区别就是，无论事件触发多么频繁，都可以保证在规定时间内可以执行一次执行函数。

JavaScript防抖与节流

防抖与节流

防抖

节流

总结