防抖与节流（源码学习）

instein 发布于2019-08-22 17:12 / 1306人阅读

摘要：防抖与节流源码学习最近自己撸了一个轮播图，在点击切换的时候，为了寻求更好的用户体验，引入了节流，在此记录对源码的学习过程源码来源防抖函数防抖使用场景现在我们需要做一个搜索框，当用户输入文字，执行事件的时候，需要发出异步请求去进行结果查询。

防抖与节流（源码学习）

最近自己撸了一个轮播图，在点击切换的时候，为了寻求更好的用户体验，引入了节流，在此记录对源码的学习过程
源码来源：underscore

防抖

函数防抖（debounce）
使用场景：现在我们需要做一个搜索框，当用户输入文字，执行keyup事件的时候，需要发出异步请求去进行结果查询。但如果用户快速输入了一连串字符，例如是5个字符，那么此时会瞬间触发5次请求，这肯定不是我们希望的结果。我们想要的是用户停止输入的时候才去触发查询的请求，这个时候函数防抖可以帮到我们
原理：让函数在上次执行后，满足等待某个时间内不再触发次函数后再执行，如果触发则等待时间重新计算

function debounce (func, wait, immediate) {
  var timeout, result;

  var later = function (context, args) {
    timeout = null;//重置
    if (args) result = func.apply(context, args);
  };

  var debounced = restArguments(function (args) {
    if (timeout) clearTimeout(timeout);//如果触发则等待时间重新计算
    if (immediate) {//应用场景,比如提交表单，需要立即执行一次
      var callNow = !timeout;//是否为第一次触发，如果是第一次触发，timeout是undefined
      timeout = setTimeout(later, wait);//注意，这里没有args，仅仅只是在wait毫秒后重置清空timeout，
      if (callNow) result = func.apply(this, args);//如果是immediate且是第一次触发，立即执行一次；result为立即执行的结果，这里this直接绑定到用户的func
    } else {
      timeout = delay(later, wait, this, args);//settimeout，注意：这里的this通过参数传给later绑定到func
    }

    return result;
  });

  //重置，取消执行
  debounced.cancel = function () {
    clearTimeout(timeout);
    timeout = null;
  };

  return debounced;
};

节流

函数节流（throttle）
使用场景：window.onscroll，以及window.onresize等，每间隔某个时间去执行某函数，避免函数的过多执行
原理：与函数防抖不同，它不是要在每完成某个等待时间后去执行某个函数，而是要每间隔某个时间去执行某个函数

//   leading：是否立即执行
//   trailing: true // wait期间如果再次调用，是否会在周期后边缘(wait刚结束)再次执行

//leading = true;trailing = true; 调用立即执行一次，wait期间如果再次调用，会在周期后边缘(wait刚结束)再次执行
//leading = true;trailing = false; 调用立即执行一次，wait期间如果再次调用，什么也不做
//leading = false;trailing = true; 调用需等待wait时间，wait期间如果再次调用，会在周期后边缘(wait刚结束)执行
//leading = false;trailing = false; 调用需等待wait时间，wait期间如果再次调用，什么也不做
function throttle (func, wait, options) {
  var timeout, context, args, result;
  var previous = 0;//上次执行时间
  if (!options) options = {};

  var later = function () {
    previous = options.leading === false ? 0 : _.now();//设置为0的话下次调用会立即执行
    timeout = null;
    result = func.apply(context, args);//可能设置timeout?
    if (!timeout) context = args = null;
  };

  var throttled = function () {
    var now = _.now();
    if (!previous && options.leading === false) previous = now;//如果不是立即执行
    var remaining = wait - (now - previous);//剩余时间
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {//开始执行
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;//记录执行时间
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);//注意只有这个地方对timeout赋值了且调用了later
    }
    return result;
  };

  //取消
  throttled.cancel = function () {
    clearTimeout(timeout);
    previous = 0;
    timeout = context = args = null;
  };

  return throttled;
};

总结

所有学习过程可见注释，完整注释GitHub地址
其中我在造轮播图的轮子的过程中，引入了节流来优化用户主动点击切换，一次来提升用户体验，感觉上还是好很多的。
轮播图演示地址

混合云专线服务 VUE防抖与节流防抖 VUE防抖源码学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94959.html

高级函数技巧-函数防抖与节流

摘要：封装方法也比较简单，书中对此问题也进行了处理使用定时器，让函数延迟秒后执行，在此秒内，然后函数再次被调用，则删除上次的定时器，取消上次调用的队列任务，重新设置定时器。在实际开发中，函数一定是最实用最频繁的一部分，无论是以函数为核心的函数式编程，还是更多人选择的面向对象式的编程，都会有函数的身影，所以对函数进行深入的研究是非常有必要的。函数节流比较直白的说，函数节流就是强制规定一...

whinc 2019-08-22 11:21 评论0 收藏0
[译]通过实例讲解Debouncing和Throtting(防抖与节流)

摘要：译通过实例讲解和防抖与节流源码中推荐的文章，为了学习英语，翻译了一下原文链接作者本文来自一位伦敦前端工程师的技术投稿。首次或立即你可能发现防抖事件在等待触发事件执行，直到事件都结束后它才执行。 [译]通过实例讲解Debouncing和Throtting(防抖与节流) lodash源码中推荐的文章，为了学习（英语），翻译了一下~ 原文链接作者：DAVID CORBACHO 本文来自一位...

Jenny_Tong 2019-08-23 13:42 评论0 收藏0
前端进击的巨人（八）：浅谈函数防抖与节流

摘要：隆重请出主角防抖与节流。防抖与节流的异同相同都是防止某一时间段内，函数被频繁调用执行，通过时间频率控制，减少回调函数执行次数，来实现相关性能优化。参考文章分钟理解的节流防抖及使用场景函数防抖和节流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇课题，或许早已是烂大街的解读文章。不过春招系列面试下来，不少伙伴们还...

_Zhao 2019-08-23 15:37 评论0 收藏0
小菊花课堂之JS的防抖与节流

摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。前言陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。详解在前端开发中，我们经常会碰到一些会持...

leoperfect 2019-08-23 13:53 评论0 收藏0
小菊花课堂之JS的防抖与节流

摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。前言陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。详解在前端开发中，我们经常会碰到一些会持...

Yangder 2019-08-02 12:10 评论0 收藏0