如何使用一个油门实现多种功能？答案

【问题标题】：How to use one throttle for multiple functions?如何使用一个油门实现多种功能？
【发布时间】：2022-11-07 23:51:41
【问题描述】：

我搜索了类似的问题，但到目前为止没有找到解决方案。

假设我有 2 个单独的提取，我的目标是用一个计时器来限制它们。有没有一种简单的方法可以实现这一目标？就像是：

const throttledFn1 = _.throttle(fn1, 500)
const throttledFn2 = _.throttle(fn2, 500)

useSharedTimer(throttledFn1, throttledFn2)

【问题讨论】：

不清楚你期望发生什么。你想要一个只开火而不是两个？或者你想让它们同时开火？
目标是防止抓取重叠，并被一个计时器限制。在一定时间内对最大获取量进行全局控制
然后只限制一个函数，而是一个带参数的函数。该论点应该区分将发生哪个提取。它可能是 URL..，或查询字符串，...
问题是，这些获取并不是那么简单，在我的情况下，它们实际上是具有大量道具的异步函数。

标签： javascript throttling

【解决方案1】：

我认为最好的方法是创建自己的油门功能。您无法访问 lodash 超时，因此不可能拥有共享计时器。

最常见的节流方法将 timers/setTimeout() 存储在一个变量中以跟踪是否应该取消某个函数，因此只要您可以访问该变量，您就可以在不同的函数之间共享计时器，如下所示：

export const createTimeout = () => {
  let timeout: any = null;

  const _start = (delay: number) => {
    if (delay > 0) {
      timeout = setTimeout(() => {
        _stop();
      }, delay);
    }
  };

  const _stop = () => {
    timeout = null;
  };

  const _persists = () => (timeout !== null ? true : false);

  return {
    persists: _persists,
    start: _start,
    stop: _stop,
  };
};

使用此代码，您可以像这样使用它


const myTimeout = createTimeout()

function nextPage() {
    if (myTimeout.persists()) return
    // logic here

    timeout.start(2000) // start/refresh timeout
}

function prevPage() {
    if (myTimeout.persists()) return
    // logic here
    
    timeout.start(2000)

}

在这段代码中，每当我开始超时时，它都会从setTimeout() 的返回值存储一个id 到变量timeout，然后setTimeout() 内部的回调必须重新分配变量timeout 的值以确定是否计时器已经结束。

【讨论】：