美文网首页前端开发
debounce与throttle

debounce与throttle

作者: laohan | 来源:发表于2017-06-26 22:44 被阅读34次

    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;
        })
      }
    }
    

    相关文章

      网友评论

        本文标题:debounce与throttle

        本文链接:https://www.haomeiwen.com/subject/uhcscxtx.html