The debounce & throttle in Javascript（防抖与节流）

XboxYan 发布于2019-08-23 12:46 / 2661人阅读

摘要：您的支持是我最大的动力，我会保证提供高质与清晰的文章与您共同成长。一些文章中的与上面所谈到的设置类似。防抖防抖技术允许我们捆绑多个连续调用成为单一的一次调用。防抖的应用这个简单的举个

欢迎star和watch我的github issue blog，欢迎加入讨论。
您的支持是我最大的动力，我会保证提供高质与清晰的文章与您共同成长。

节流[throttle]与防抖[debounce]在前端领域经常涉及，下面我们会尝试解释其中的原理与差异与实现以及一些应用场景

common sense

随着应用与需求复杂度不断上升，节流与防抖也出现了一些相同的设置其中一点就是可以选择触发的leading和trailing（前置或后置）或both。

一些文章中的immediate option与上面所谈到的设置leading: true类似。

debounce

debounce: Debounce technique allows us to "group" multiple sequential calls in a single one.
防抖：防抖技术允许我们捆绑多个连续调用成为单一的一次调用。

可简单的理解防抖是将一次调用发生时的前后时间（TIMING）断内不允许再次触发，若多次触发则方法的真实调用根据设置可以在：

第一次触发时（leading）--- 这将导致后续连续的触发不再发生

最后一次触后间隔至少一个TIMING内没有被再次触发时调用（trailing）

Both

例如当设置leading: true且 TIME = 400ms

防抖的实现：

/**
   * 返回一个函数，只要它一直被触发将不会被调用
   * 函数将在其不再被触发的N毫秒后调用，如果immediate被传入那么
   * 函数将在第一次触发是立即调用
   * 
   */

// es6 syntax import & export
export function deBounce(func, delay, immediate) {
    let timeout;

    return function executedFunction() {
      const context = this;
      const args = arguments;

      var later = function() {
        timeout = null;
        if(!immediate) func.apply(context, args);
      }

      const callNow = immediate && !timeout;

      clearTimeout(timeout);

      timeout = setTimeout(later, delay);

      if (callNow) func.apply(context, args);
    }
  }

// 这是其中的一种实现关于leading与trailing可自行调整immediate。

防抖的应用

这个简单的举个

云服务器 GPU云服务器 VUE防抖与节流 javascript in Debouncing Throttling

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

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

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

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

whinc 2019-08-22 11:21 评论0 收藏0
函数防抖与节流

摘要：函数防抖就是让某个函数在上一次执行后，满足等待某个时间内不再触发此函数后再执行，而在这个等待时间内再次触发此函数，等待时间会重新计算。 underscore.js提供了很多很有用的函数，今天想说说其中的两个。这两个函数都用于限制函数的执行。 debounce 在解释这个函数前，我们先从一个例子看下这个函数的使用场景。假设我们网站有个搜索框，用户输入文本我们会自动联想匹配出一些结果供...

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

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

Jenny_Tong 2019-08-23 13:42 评论0 收藏0
JavaScript：函数防抖与函数节流

摘要：函数防抖简单实现模拟请求获取函数的作用域和变量清除定时器节流名词解释连续执行函数，每隔一定时间执行函数。效果函数防抖是某一段时间内只执行一次函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。防抖（debounce）名词解释：在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。使用场景：以百度输入框例，比如你要查询...

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

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

_Zhao 2019-08-23 15:37 评论0 收藏0