防抖动(debounce )和 节流阀(throttle )

// 防抖
// 首次运行时把定时器赋值给一个变量, 第二次执行时,
//  如果间隔没超过定时器设定的时间则会清除掉定时器, 
//  重新设定定时器, 依次反复, 当我们停止下来时,
//  没有执行清除定时器, 超过一定时间后触发回调函数。
function debounce(fn, delay = 100) {
    var timer = null;
    return function() {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null
        }, delay)
    }
}

// 节流
// 思路: 第一次先设定一个变量true,
// 第二次执行这个函数时,会判断变量是否true,
// 是则返回。当第一次的定时器执行完函数最后会设定变量为flase。
// 那么下次判断变量时则为flase,函数会依次运行。
function throttle(fn, delay = 100) {
    //首先设定一个变量,在没有执行我们的定时器时为null
    var timer = null;
    return function() {
        //当我们发现这个定时器存在时,则表示定时器已经在运行中,需要返回
        if (timer) return;
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null
        }, delay)
    }
}


var throttle = function(func, wait) {
    var context, args, timeout, result;
    var previous = 0;
    var later = function() {
      previous = new Date();
      timeout = null;
      result = func.apply(context, args);
    };
    return function() {
      var now = new Date();
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      if (remaining <= 0) {
        clearTimeout(timeout);
        timeout = null;
        previous = now;
        result = func.apply(context, args);
      } else if (!timeout) {
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };

你可能感兴趣的:(知识)