当涉及到前端异步请求时，我们通常需要考虑防抖和节流的问题。这两种方法都可以有效地减轻浏览器和服务器的负担，同时也能提高用户体验。在本文中，我将为您介绍如何使用 Promise 实现异步请求的防抖和节流。
防抖
防抖 (Debouncing) 是一种技术，可以将一连串的重复操作压缩成一次操作。当某些操作需要经过一段时间才能完成时，如果用户一直点击，那么服务器就会接收到大量的请求，这将导致性能下降。在这种情况下，我们可以使用防抖来防止这种情况的发生。
实现方式
通过 Promise 和定时器来实现防抖。
-- -------------------- ---- ------- -------- ------------ ------ - --- ----- - ----- ------ -------- -- - ----- ---- - ---------- -------------------- ----- - ------------- -- - -------------- ------ -- ------- - -展开代码
在上面的例子中，我们定义了一个名为 debounce 的函数，它接受两个参数：fn 和 delay。fn 表示要防抖的函数，delay 表示防抖的延迟时间 (毫秒)。
在返回的函数中，我们首先清除定时器 (如果有)，然后创建一个新的定时器并在 delay 毫秒后调用 fn 函数。通过这种方式，我们可以确保 fn 函数只会在防抖延迟时间之后被调用，从而减少请求的数量。
示例
-- -------------------- ---- ------- -------- --------------- - -------------------------------- - ----- --------------- - ---------------- ----- ------------------------------ ----------------------- ------------------------展开代码
在上面的示例中，我们定义了一个名为 search 的函数并将其用作防抖的函数。我们还定义了一个名为 searchDebounced 的新函数，该函数是 search 函数的防抖版本，防抖延迟时间为 500 毫秒。
当我们调用 searchDebounced 函数时，它会将传递给它的参数传递给 search 函数，但仅在没有更多的调用发生时才会真正执行 search 函数。
节流
节流 (Throttling) 是一种技术，其目的是控制函数的调用频率，以便减少浏览器和服务器的负担。当用户连续地快速执行操作时，我们可以使用节流来避免服务器过度负荷。
实现方式
通过 Promise 和时间戳来实现节流。
-- -------------------- ---- ------- -------- ------------ ------ - --- -------- - -- ------ -------- -- - ----- ----------- - ----------- -- ------------ - -------- - ------ - -------- - ------------ -------------- ----------- - - -展开代码
在上面的例子中，我们定义了一个名为 throttle 的函数，它接受两个参数：fn 和 delay。fn 表示要节流的函数，delay 表示节流的延迟时间 (毫秒)。
在返回的函数中，我们首先获取当前时间戳 currentTime，然后检查上次调用时间与当前时间戳的差值是否大于阈值 delay。如果是，我们更新 lastTime 并调用 fn 函数。否则，我们不执行任何操作。
示例
function scroll() { console.log('scroll event'); } const scrollThrottled = throttle(scroll, 1000); window.addEventListener('scroll', scrollThrottled);
在上面的示例中，我们定义了一个名为 scroll 的函数，用于处理滚动事件。我们还定义了一个名为 scrollThrottled 的新函数，该函数是 scroll 函数的节流版本，节流延迟时间为 1000 毫秒。
当我们将 scrollThrottled 绑定到 scroll 事件时，它将在 1000 毫秒内最多执行一次 scroll 函数。这样，我们避免了函数的过度执行，同时提高了性能。
结论
在本文中，我们介绍了通过 Promise 实现异步请求的防抖和节流的方法。使用这两种技术可以有效地减轻服务器和浏览器的负担，并提高用户体验。如果您在开发中遇到了异步请求问题，请尝试使用防抖和节流来解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675261e68bd460d3ad939c25
