函数防抖和节流快速记忆

Posted 2020-12-19 websir

函数去抖：

单位时间内，无论触发多少次 只执行一次；这里的时间是短暂的 极端情况下，函数会一直处于等待状态

函数去抖常用于防止 短时间内重复执行函数

 

 1 function debounce(func, delay) {
 2     //去抖
 3     var tId;
 4     return function () {
 5       var context = this;
 6       var arg = arguments;
 7       if (tId) clearTimeout(tId);
 8       tId = setTimeout(function () {
 9         func.apply(context, arg);
10       }, delay);
11     };
12   }
13 
14 //使用
15 debounce(function () {
16       console.log(1)
17     }, 2000)

 

函数节流：

 

单位时间内只执行一次；不同于防抖，节流多用于持续触发 且 不会出现极端情况

 

 

function throttle(func, delay) {
    //函数节流
    var timer = null;
    var startTime = Date.now();
    return function () {
      var curTime = Date.now();
      var remaining = delay - (curTime - startTime);
      var context = this;
      var args = arguments;
      clearTimeout(timer);
      if (remaining <= 0) {
        func.apply(context, args);
        startTime = Date.now();
      } else {
        timer = setTimeout(func, remaining);
      }
    };
  }