使用数组来跟踪多个 setTimeouts 的逻辑是什么答案

【问题标题】：what is the logic of using an array to keep track of multiple setTimeouts使用数组来跟踪多个 setTimeouts 的逻辑是什么
【发布时间】：2020-09-23 11:59:36
【问题描述】：

我刚刚浏览了 react-slick 的代码，遇到了以下代码：-

this.callbackTimers.push(
     setTimeout(() => this.setState({ animating }), 10)
);

在 componentWillUnmount 中，callbackTimers 像这样被清除：-

componentWillUnmount = () => {
    if (this.callbackTimers.length) {
      this.callbackTimers.forEach(timer => clearTimeout(timer));
      this.callbackTimers = [];
    }
};

是使用数组释放内存的唯一目的还是我在这里遗漏了什么？

为什么不直接调用 setTimeout：

setTimeout(() => this.setState({ animating }), 10)

而不是使用数组？我确实看到callbackTimers 也在其他地方使用，但我不知道为什么除了释放内存之外需要这个数组，这个数组还有其他用途吗？

有问题的线路可以在HERE找到。

【问题讨论】：

所有尚未过期的计时器都会被清除，因此它们不会在组件卸载后触发。将它们的引用保存在数组中只是最简单的方法。
@Alexander Solonik，setTimeout 返回计时器 id，我们可以将其用于 clearTimeout 以防止内存泄漏，或者正如 Chris 提到的那样，用于防止在卸载组件后运行代码。
你有没有遇到过在一个未挂载的组件上调用setState？
@FelixKling 不是真的没有，我相信没有数组并清除它可能会导致这种情况？
@AlexanderSolonik 参考 Felix 提到的内容，考虑一个组件发出 HTTP 请求但由于某种原因组件在该请求完成之前卸载的情况，在这种情况下，您将得到 this warning

标签： javascript reactjs settimeout

【解决方案1】：

clearTimeout() 函数只需要取消任何挂起的计时器。否则，你真的不需要调用clearTimeout()函数来清除内存。

在您问题的代码中，定时器在componentWillUnmount 生命周期方法中被清除，以在组件即将卸载时取消任何挂起的定时器。这将阻止任何挂起计时器的回调函数中的任何代码在组件卸载后执行。

【讨论】：