节流和防抖

节流和防抖

节流和防抖是提高性能的方法。对于高频率触发的事件就需要用节流或防抖，防止浏览器的卡死。

节流

节流：如果短时间内大量触发同一事件，那么函数执行一次后，该函数再指定的时间期限内不再执行，直到对了那段时间才会重新生效（类似技能冷却时间）
节流函数的封装：

      function throttle(fn, delay) {
        let timerId = null;
        let flag = true;
        return function () {
          if (!flag) return;
          flag = false;
          let self = this;
          let args = arguments;
          timerId && clearTimeout(timerId);
          timerId = setTimeout(function () {
            flag = true;
            fn.apply(self, args);
          }, delay || 1000);
        };
      }

节流在vue中的使用
当在vue中使用时，可以使用自定义指令来触发节流函数
1、指令的定义

  directives: {
    throttle: {
      // 指令的定义
      inserted: function (el, obj) {
        let timerId = null
        let flag = true
        el.addEventListener('input', function () {
          if (!flag) return
          flag = false
          timerId && clearTimeout(timerId)
          timerId = setTimeout(function () {
            flag = true
            obj.value()
          }, 1000)
        })
      }
    }
  },

2.指令的使用

  <input type="text" placeholder="搜索歌曲、歌手、专辑" v-model="keywords" v-throttle="search">

注：search是一个方法，触发后的执行的方法

防抖

防抖:在第一次触发事件，不立即执行函数，而是给一期限如200ms然后在200ms内如果没有再触发事件，那么就执行函数，如果再200ms内再次触发事件，那么当前的计时取消，重新计时。
效果：如果短时间内触发同一事件，只会执行一次函数。
防抖函数的封装：

   function debounce(fn, delay) {
        let timerId = null;
        return function () {
          let self = this;
          let args = arguments;
          timerId && clearTimeout(timerId);
          timerId = setTimeout(function () {
            fn.apply(self, args);
          }, delay || 1000);
        };
      }

使用场景

搜索框input可以使用节流，页面resize时间可以使用防抖，页面滚动scroll也可以使用防抖。