JS中的函数节流及实现

1.什么是函数节流
概念:函数节流(throttle)是指连续触发事件,但是在n秒中只执行一次.

2.什么时候会使用函数节流
前端开发过程中有一些事件onresize,scroll,mousemove 等等,在短时间内会被频繁触发。如果不做限制的话有可能一秒之内执行几十次、几百次,那不仅会浪费计算机资源,还会降低程序运行速度,严重的话甚至造成浏览器卡死、崩溃,这种问题显然是致命的。所以需要我们去减少不必要的执行次数。

3.代码实现

/**
 * 节流
 * @param {Function} fn
 * @param {Number} delay 延迟时间 
 */
 function throttle (fn, delay) {
  var t = null,
      begin = new Date().getTime();

  return function () {
    var _self = this,
        args = arguments,
        cur = new Date().getTime();

    clearTimeout(t);
    // 时间间隔大于延迟时间则进入
    if (cur - begin >= delay) {
      fn.apply(_self, args);
      begin = cur;
    } else {
      t = setTimeout(function () {
        fn.apply(_self, args);
      }, delay);
    }
  }
}

你可能感兴趣的:(JS中的函数节流及实现)