javascript - React Native timemixin 取消定时器超时

Question

我找到了如何取消 Javascript 的超时，但如何取消计时器混合？建议将 Timermixin 与 React Native 一起用于 Javascript 超时。

var TimerMixin = require('react-timer-mixin');

this.setTimeout(() => {this.setState({results: ' '})}, 1800)

如果执行其他操作，我需要取消它。

Answer 1

解决方案

var clearId = this.setTimeout(() => {this.setState({results: ' '})}, 1800);
this.setState({ clearId: clearId});

...稍后当您想取消 setTimeout 调用时

this.clearTimeout(this.state.clearId)  

解释

您可以使用 clearTimeout 以与常规 setTimeout 相同的方式取消它。如果函数尚未被调用，clearTimeout 将阻止该函数运行。

调用 setTimeout 时，它“返回一个数字，表示已设置的计时器的 ID 值。将此值与 clearTimeout() 方法一起使用可取消计时器。” http://www.w3schools.com/jsref/met_win_settimeout.asp

由于我想您会希望在单独的函数中调用 clearTimeout，因此您可以将 clearId 存储为状态属性，以便稍后在单独的函数中轻松引用它。

如果想了解更多有关 React Native 中的计时器的信息，我发现此文档很有帮助 https://facebook.github.io/react-native/docs/timers.html .

还有

通过使用 TimerMixin(而不是常规的 setTimeout 方法)，如果组件卸载，setTimeout 调用将被自动阻止。很有用!这就是为什么您应该确保使用 TimerMixin 而不是常规的 Timer 方法。

“我们发现，使用 React Native 创建的应用程序出现 fatal error 的主要原因是组件卸载后计时器触发。” https://facebook.github.io/react-native/docs/timers.html

TimerMixin 将避免这种情况并确保在卸载组件时清除所有 Timer 调用。