js防抖和节流

2016-11-03

防抖(debounce)

在写前端脚本的时候,有时候会某一时间短时间内触发多次事件,例如mouseover,resize,scroll函数,如果在这些回调执行复杂的操作,那么会导致页面卡顿,所以必须采取一些措施,我们想要的是在某一连续操作的时间内,不触发操作,直到结束符合条件的指定时间后才执行,那么就可以用防抖(debounce)函数

/**
 *  防抖函数
 * @param func    执行函数
 * @param wait    多久执行一次
 * @param immediate 是否立即执行
 * @returns {Function}  返回防抖函数
 */
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

// 使用方法
var myEfficientFn = debounce(function() {
  // 250ms执行一次
}, 250);
window.addEventListener('resize', myEfficientFn);

节流(throttle)

节流就是时间间隔内只触发一次,那么实现的方法就是在防抖的基础上加个时间间隔的判断

/**
 * 节流函数,在连续触发的函数内控制间隔时间内执行函数
 * @param func 需要执行的函数
 * @param wait  间隔内执行一次
 * @param immediate 是否立刻触发
 * @returns {Function}  防抖函数
 */
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

// 使用
var myEfficientFn = debounce(function() {
  // 操作函数
}, 250);
window.addEventListener('resize', myEfficientFn);

最明了的效果可以看下面,在蓝色区域来回移动,看触发的次数

目前有第三方实现的库有:

1. jquery $.throttle和$.debounce

2. lodash _.throttle和_.debounce.

3. unserscore _.throttle_.debounce.

参考资料:http://drupalmotion.com/article/debounce-and-throttle-visual-explanation

标签: javascript

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
React17.0生命周期调整
在即将到来的react17.0版本,react团队对生命周期做了调整,将会移除 componentWillMount,c...
webpack插件实现
webpack 插件是由「具有 apply 方法的 prototype 对象」所实例化出来的。这个 apply 方法在安...