JavaScript - 防抖与节流 ⏱

人们对什么是去抖动和节流、在哪里使用以及它的具体工作原理有很多困惑。

我们将通过本文以最简单的方式揭开上述所有内容的神秘面纱。

了解这两点很重要，在某些情况下，它们会让我们的面试更轻松。（额外提示：这也是一个常见的面试问题）🥳

简单来说，
Throttling这是一种限制函数调用次数的方法。执行一个函数后，在一定时间内停止所有函数调用。

Debouncing是一种将函数的执行延迟到稍后的时间段直到有某些正在进行的操作的方法。

这两者可能看起来令人困惑、重叠，几乎是同一件事——但事实并非如此！我们会解决这个问题。

没有比通过示例学习更好的学习方法了。👩‍💻👨‍💻

节流：

假设有一个“获取报价”按钮。当你点击它时，它会触发一个异步 API 调用来获取报价并将其呈现在屏幕上。

现在，如果某个疯子继续疯狂地点击它，会发生什么——比如点击一百万次，直到他/她的手指放弃。😑

在这种情况下，没有任何控制机制，它将触发一百万次 API 调用（故意夸大！）
这将导致性能下降。

如果您有某种点击率限制器，您可以避免这种情况。

油门大摇大摆地开着😎

它是如何工作的？

这是“获取报价”示例的 CodePen。稍微练习一下。

去抖动：

还记得搜索建议的工作原理吗？比如，当你开始在谷歌搜索栏中输入内容时，它会不断更新其建议列表。

这些建议实际上是通过 API 调用实现的。那么，问题是，每次输入框中的文本发生变化时，是否都应该重新调用一次 API？

不会吧？这对谷歌来说可就糟了。想象一下，你输入“如何编写更好的 JavaScript”——本身就 30 个字符，导致 30 次 API 调用。再想象一下，全球数百万甚至数十亿的谷歌员工每秒都在输入他们的查询——砰！！！💥

那么你如何处理这个问题？

在回答这个问题之前，我们先想问一下，如果用户还在输入，我们真的需要调用 API 吗？不。我们应该等到用户停止输入一段时间后再调用 API。

是的，你猜对了，这可以通过使用Debouncing来实现。

正如我们之前所说，去抖动是一种将函数的执行延迟到稍后的时间，直到有某些正在进行的操作的方法。

下面的 CodePen 说明了完全相同的内容。

额外部分：了解细节💸

让我们详细看看debounce和的函数定义。throttle

风门

const throttle = (func, delay) => { 
  let toThrottle = false;
  return function() { 
    if(!toThrottle) {
      toThrottle = true;
      func.apply(this,arguments)
      setTimeout(() => {
        toThrottle = false
      }, delay);
    }
  }; 
};

去抖动

const debounce = (func, delay) => { 
  let timerId; 
  return function() { 
    clearTimeout(timerId) 
    timerId = setTimeout(() => func.apply(this,arguments), delay)
  }; 
};

从定义中我们可以清楚地看到

如果标志为 false，则 Throttle 允许立即执行。执行完成后，直到周期结束toThrottle才会调用此函数。delay
防抖功能会推迟执行，直到一段时间内输入没有变化delay。如果发生变化，则取消之前安排的执行并创建新的计划。

附言：本文要求读者事先了解 JavaScript 中的闭包、this、call 和 apply 等概念。我在下面列出了一份推荐阅读清单，以帮助读者加深理解。

喜欢就分享！
关注 Twitter，了解更多科技资讯、小测验和文章。😃👋

文章来源：https://dev.to/yashsoni/javascript-debounce-vs-throttle-392i