React Native timemixin 取消定时器超时

Question

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

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 时，它“returns 一个数字，表示所设置的计时器的 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 方法。

"We found out that the primary cause of fatals in apps created with React Native was due to timers firing after a component was unmounted." https://facebook.github.io/react-native/docs/timers.html

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

React Native timemixin cancel timer timeout