理解节流与防抖

glumes 发布于2019-08-23 15:26 / 2021人阅读

摘要：节流节流限制了一个函数可以在短时间内被调用的次数。更新防抖防抖确保了一个函数只有在一个固定时间段内没有被调用过后，才会再次被调用。再换句话说防抖会等待事件不再高频发生，再触发。这个网站很好的可视化了节流与防抖。

节流 Throttling

节流限制了一个函数可以在短时间内被调用的次数。可以这样形容：在一毫秒内最多执行此函数 1 次。

Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds."

再换句话说：

节流会忽略在短时间内高频发生的事件，只按照计划好的频率触发。

//fn 要执行的函数
//delay 计划好的执行间隔
//返回一个函数

function throttled(fn, delay) {
    let lastCall = 0;//初始化lastCall
    return function (...args) {
        const now = (new Date).getTime();//当函数被运行，获取当前时间
        if (now - lastCall < delay) {
        
        //这里（now - lastCall）就是间隔时间
           
            return;//如果间隔时间小于计划好的执行间隔，什么也不做。
        }
        lastCall = now; //更新lastCall
        return fn(...args);
    } 
}

防抖 Debouncing

防抖确保了一个函数只有在一个固定时间段内没有被调用过后，才会再次被调用。可以这样形容：比如说只有在 1 毫秒过后，才允许执行这个函数。

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called."

再换句话说：

防抖会等待事件不再高频发生，再触发。

//fn 要执行的函数
//delay 计划好的等待时间
//返回一个函数

function debounced(delay, fn) {
  let timerId;
  return function (...args) {
    if (timerId) {//如果正在一个timeout中
      clearTimeout(timerId);//中断timeout，不会发生setTimeout的回调函数
    }
    timerId = setTimeout(() => {//开始新的timeout
      fn(...args);
      timerId = null;
    }, delay);
  }
}

结论

节流在我们不关心函数参数是什么的时候比较有用，比如鼠标移动，滚轮事件，我们在乎的是操作的频率。

防抖在我们关心高频事件发生过后，得到的那个结果的时候，比较有用，比如用户迅速输入完一串用户名，对其进行查重的结果。

这个网站很好的可视化了节流与防抖。

参考信息

The Difference Between Throttling and Debouncing

Understanding Throttling and Debouncing

Debouncing and Throttling Explained Through Examples

Throttling and debouncing in JavaScript

云服务器 GPU云服务器 VUE防抖与节流防抖 VUE防抖函数节流

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

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

JavaScript之节流与防抖

摘要：个人博客原文地址背景我们在开发的过程中会经常使用如等事件，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。个人博客原文地址背景我们在开发的过程中会经常使用如scroll、resize、touchmove等事件，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。因此针对这类事件要进行节流或者防抖处理节流节流的意思...

wayneli 2019-08-23 10:33 评论0 收藏0
The debounce & throttle in Javascript（防抖与节流）

摘要：您的支持是我最大的动力，我会保证提供高质与清晰的文章与您共同成长。一些文章中的与上面所谈到的设置类似。防抖防抖技术允许我们捆绑多个连续调用成为单一的一次调用。防抖的应用这个简单的举个欢迎star和watch我的github issue blog，欢迎加入讨论。您的支持是我最大的动力，我会保证提供高质与清晰的文章与您共同成长。节流[throttle]与防抖[debounce]在前...

XboxYan 2019-08-23 12:46 评论0 收藏0
浅谈节流与防抖

摘要：节流和防抖在开发项目过程中很常见，例如输入实时搜索滚动更新了，等等，大量的场景需要我们对其进行处理。防抖多次触发，只在最后一次触发时，执行目标函数。节流限制目标函数调用的频率，比如内不能调用次。节流和防抖在开发项目过程中很常见，例如 input 输入实时搜索、scrollview 滚动更新了，等等，大量的场景需要我们对其进行处理。我们由 Lodash 来介绍，直接进入主题吧。 Lod...

thursday 2019-08-26 10:17 评论0 收藏0
从lodash源码学习节流与防抖

摘要：首先重置防抖函数最后调用时间，然后去触发一个定时器，保证后接下来的执行。这就避免了手动管理定时器。之前遇到过一个场景，页面上有几个d3.js绘制的图形。如果调整浏览器可视区大小，会引发图形重绘。当图中的节点比较多的时候，页面会显得异常卡顿。为了限制类似于这种短时间内高频率触发的情况，我们可以使用防抖函数。实际开发过程中，这样的情况其实很多，比如：页面的scroll事件 ...

CloudDeveloper 2019-08-26 11:59 评论0 收藏0
节流 - 理解，实践与实现

摘要：节流分流，与防抖去抖实现原理相似。本文主要讨论节流，镜像文章防抖理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解节流防抖的读者能够有针对性地，逐一掌握它们。上方为未节流模式，每一次触发都会绘制一个圆点。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 节流(分流)，与防抖（去抖）实现原理相似。本文主...

layman 2019-08-26 13:41 评论0 收藏0