防抖和节流实现方法以及概念

概念：

在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。

加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。

一、防抖

介绍：如果用户多次频繁操作以最后一次为准，当然也可以以第一次为准，进行数据更新或者网络资源请求，以消除冗余的操作，或者减少一定的请求资源浪费。

  function debounce(fn, time) {
      let _arguments = arguments
      let timeout = null
      return function () {
          if (timeout) {
              clearTimeout(timeout)
          }
          timeout = setTimeout(() => {
              fn.call(this, _arguments)
          }, 5000);                        //意思是5秒后执行，不管5秒内点击多少次只算1次，故而防抖
      }
  }

二、节流

介绍：在一定时间范围内，用户触发多次只会执行一次以达到防止用户频繁操作的目的。

  function throttle(func, limit) {
    let inThrottle;
    return function (...args) {
      const context = this;
      if (!inThrottle) {
        func.apply(context, args);
        inThrottle = true;
        setTimeout(() => inThrottle = false, limit);
      }
    };
  }
  使用节流函数控制连续触发事件的处理函数执行频率 
  btn.onclick = throttle(() => {
    console.log('点击了一次');
  }, 1000)