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);
    }
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。