debounce与throttle

debounce 去抖

适用于resize事件等
在window的’resize’事件中,会被执行很多次,而每一次的执行,都会导致浏览器的重排重绘动作,这时候就有可能出现了页面卡顿现象了。
那么,debounce就出现了,它的作用在于让这个事件处理函数在连续触发时,只在最后一次执行动作,其他时候不予理会

function debounce(fn, wait) {
  let timer = null;
  return function(...args) {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(function() {
      fn.apply(this, args)
    }, wait)
  }
}

throttle 节流

适用于mousemove、scroll事件等
跟debounce一样,都是减少事件的执行次数。不同点在于,这个是会在每间隔多少时间就去执行一次事件处理函数,例如200ms,400ms,600ms… 当然,这个时间并不是精准的,只是大概的一个时间间隔

function throttle(fn, wait) {
  let timer = null;
  return function(...args) {
    if (timer) {
      return;
    }
    timer = setTimeout(function() {
      fn.call(this, ...args);
      timer = null;
    })
  }
}
    原文作者:laohan
    原文地址: https://www.jianshu.com/p/56659d94a22c
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞