olsondy / working-usage Goto Github PK

function debounce(fn, delay) {
    // 定时器
    var timer = null;
    return function() {
        var that = this;
        var args = [].slice.call(arguments);
        var callNow = !timer;
        if(timer) clearTimeout(timer);
        timer = setTimeout(function() {
            timer = null;
        }, delay)
        if(callNow) fn.apply(that, args);
    }
}

function debounce(fn, delay) {
    // 定时器
    var timer = null;
    return function() {
        var that = this;
        var args = [].slice.call(arguments);
        if(timer) clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(that, args);
        }, delay);
    }
}

/**
 * @desc 函数防抖
 * @param       fn              Function     事件处理函数
 * @param       delay           Number       设定延时时间
 * @param       isImmediate     Boolean      事件触发时是否立刻执行
 */
function debounce(fn, delay, isImmediate) {
    var timer = null;
    return function() {
        var that = this;
        var args = [].slice.call(arguments);
        var callNow = !timer && isImmediate;
        
        if(timer) clearTimeout(timer);
        
        // 非立即执行
        timer = setTimeout(function() {
           timer = null;
           if(!isImmediate) fn.apply(that, args);
        }, delay);
        // 立即执行
        if(callNow) fn.apply(that, args);
    }
}

// 使用
window.addEventListener('resize', debounce(function() {
    console.log('防抖了');
}, 600))

function throttle(fn, delay) {
    var prev = Date.now();
    return function() {
        var that = this;
        var args = [].slice.call(arguments);
        var now = Date.now();
        if(now - prev >= delay) {
            fn.apply(that, args);
            prev = now;
        }
    }
}

function throttle(fn, delay) {
    var timer = null;
    return function() {
        var that = this;
        var args = [].slice.call(arguments);
        if(!timer) {
            timer = setTimeout(function(){
                fn.apply(that, args);
                timer = null;
            }, delay)
        }
    }
}

/**
 * @desc 函数节流
 * @param       fn              Function     事件处理函数
 * @param       delay           Number       设定执行时间
 */
function throttle(fn, delay) {
    var timer = null;
    var prev = Date.now();
    return function() {
        var that = this;
        var args = [].slice.call(arguments);
        var now = Date.now();
        var diff = now - prev;
        if(timer) clearTimeout(timer);
        if(diff >= delay) {
            fn.apply(that, args);
            prev = now;
        }else {
            timer = setTimeout(function() {
                fn.apply(that, args);
            	prev = Date.now();
                timer = null;
            }, delay)
        }
    }
}

// 使用
window.addEventListener('resize', debounce(function() {
    console.log('节流了');
}, 600))

  /**
   * 
   * @param {Function} func 回调函数 
   * @param {Number} wait 设定的延时时间
   * @param {Boolean} immediate 是否立即执行
   */
  _.debounce = function(func, wait, immediate) {
    // 定时器，执行回调函数的返回值
    var timeout, result;

    var later = function(context, args) {
      // 自空定时器
      timeout = null;
      if (args) result = func.apply(context, args);
    };

    // 这里使用了类 ES6 rest 参数的实现函数，当感觉有点多余，而且同样的 _.throttle 没使用到，也没影响
    // 试了对 _.throttle 使用 restArgs 函数，似乎没什么不同
    var debounced = restArgs(function(args) {
      // 每次触发的时候先清除之前的定时器任务
      if (timeout) clearTimeout(timeout);
      // immediate 为 true，表示在触发后会立即执行回调函数，而后在设定的时间内，持续触发，不会执行回调函数，只能在到达了设定的时间后，再次触发才会立即执行回调函数
      // immediate 为 false，表示的是触发后需要等到达了设定的时间后，才会执行回调函数，在这个过程中如果发生持续触发，定时器的计时又回重新开始计时
      if (immediate) {
        // 如果设置立即执行的话，进入到这里
        // timeout 定时器没自空的话，表示还在设定时间内，此时触发并不会执行回调函数
        var callNow = !timeout;
        // 到达设定时间后，自空定时器，这样下次触发会立即执行回调函数
        timeout = setTimeout(later, wait);
        if (callNow) result = func.apply(this, args);
      } else {
        // 如果没有设置立即执行的话，进入到这里
        timeout = _.delay(later, wait, this, args);
      }

      return result;
    });

    // 清除防抖
    debounced.cancel = function() {
      clearTimeout(timeout);
      timeout = null;
    };

    return debounced;
  };

  /**
   * 函数节流
   * @param {Function} func 回调函数 
   * @param {Nubmer} wait 设定的延时时间
   * @param {Object} options 配置项
   */
  _.throttle = function(func, wait, options) {
    // 定时器，执行上下文，回调函数的参数，执行回调函数的返回值
    var timeout, context, args, result;
    // 存储上一次触发函数的时间戳
    var previous = 0;
    // 配置参数
    // options.leading 为 false，表示禁止第一次触发便立即执行回调函数
    // options.trailing 为 false，表示禁止最后一次触发后执行回调函数
    if (!options) options = {};

    var later = function() {
      // console.log(333)
      // 根据 leading 配置参数重置前一次触发的时间戳
      previous = options.leading === false ? 0 : _.now();
      // 自空定时器
      timeout = null;
      // 执行回调函数
      result = func.apply(context, args);
      // 清空数据，防止内存泄露
      if (!timeout) context = args = null;
    };

    var throttled = function() {
      // 获取当前时间戳
      var now = _.now();
      // 根据配置的 leading 的值，判断第一次触发是否立即执行回调函数
      if (!previous && options.leading === false) previous = now;
      // 持续性的两次函数触发（上一次和当前）之间的时间间距和设定的延时时间对比
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      // 如果持续触发函数之间的时间间距大于设定的延时时间，表示可以立即执行回调函数
      // throttle 的时间戳实现方式
      if (remaining <= 0 || remaining > wait) {
        // console.log(111)
        // 如果定时器存在，就先清除定时器任务，立即执行就不需要定时器了
        // 避免定时器执行回调函数之前进入到这里，就会执行两次
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        // 重置前一次触发的时间戳
        previous = now;
        // 执行回调函数
        result = func.apply(context, args);
        // 清空数据，防止内存泄露，因为变量都存在闭包中，垃圾回收机制无法回收
        // 前面已经已经处理过 timeout 定时器了，!timeout 无论如何都是成立的，似乎多余的判断
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) { 
        // throttle 的定时器实现方式
        // 根据配置的 trailing 的值，判断在最后一次触发后是否还执行回调函数
        // 这里的 remaining 值肯定是大于0且小于设定的延时时间的
        // 定时器的延时时间为什么不是设定的 wait 值而是计算之后的 remaining 值
        // 因为 JavaScript 是单线程的原因，所有的任务不需排队等待执行，JavaScript 任务又分成同步任务和异步任务
        // setTimeout 定时器作为异步任务会在到了指定的时间时将事件放入到任务队列中等待执行
        // 只有当主线程上的任务都执行完后才会去任务队列中拉去任务执行
        // setTimeout 定时器设定的延时时间并不是精准的，因为在执行其他任务的时候可能会耗时
        // 等到执行了 setTimeout 定时器的回调函数，再获取当前的时间重置前一次触发的时间戳
        // 中间的时间间隔可能就会大于设定的延时时间，也就是 now - previous > wait
        // 这样的情况就会导致在高频率的触发事件的时候，总是会立即执行回调函数，而不会进入到这里
        // 关于 JavaScript 的单线程，可参考文章： https://github.com/webproblem/Blog/issues/2
        // console.log(222)
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
    // 清除节流
    throttled.cancel = function() {
      clearTimeout(timeout);
      previous = 0;
      timeout = context = args = null;
    };

    return throttled;
  };