防抖与节流

函数防抖

• 当一个函数被频繁触发时，为了进行优化，使用函数防抖
• 函数防抖指的是在一段时间内，只触发一次函数
• 当触发一次事件之后，等待一段时间之后才执行函数。当在这段时间之内，又发生了触发事件，则重新开始计时

      function debounce(fn, delay) {
        // 定义一个定时器
        let timer = null;
        return function () {

          if (timer) {
            // 当再次触发函数时，发现还没有到达延迟时间
            clearTimeout(timer);
          }
          timer = setTimeout(fn, delay);
        }
      }

函数节流

• 函数节流指的是一个函数只有在大于执行周期时才会执行函数，而在执行周期之内不会执行函数
• 设置一个状态位，当事件触发时，设置状态位为false，默认不执行函数，只有当超过执行周期之后，将状态位设置为true时，才会执行函数

      function throttle(fn, delay) {
        let valid = true;
        return function () {
          if (!valid) {
            return false;
          }
          // 执行函数在时间间隔之内设置状态位为false
          valid = false;
          setTimeout(() => {
            fn();
            valid = true;
          }, delay)
        }
      }