Question

我知道browser timers存在，但我从未使用它们，也不知道哪些是我需要使用的。我正在使用React Native，我希望代码块仅在10秒间隔内执行，间隔的下限应该是第一次单击按钮时的下限。这就是我所拥有的：

  <TouchableHighlight style={styles.button}
        onPress={() => nClicks++}>

        <Text style={styles.buttonText}>
         Tap Here!
        </Text>

        </TouchableHighlight>

动作响应完美，每次点击全局变量的值增加1.我只需要以某种方式找到添加时间间隔约束的方法。有什么想法吗？

Answer 1

在onPress()函数中，您可能想要放置setInterval()方法。您可以尝试以下代码：

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.map(clearInterval);
    this.intervals.push(setInterval.apply(null, arguments));
  }
};

var App = React.createClass({
  mixins: [SetIntervalMixin], // Use the mixin
  getInitialState: function() {
    return {
      seconds: 0,
      nClicks: 0
    };
  },
  onPress: function( plus ) {
    //this.setState({nClicks: plus});
    this.setInterval(this.codeToExcecute, plus * 1000); // Call a method on the mixin
    this.setState({nClicks: this.state.nClicks + 1});
  },
  codeToExcecute: function() {
    console.log('Im the code to excecute');
  },
  render: function() {
    return (
      <div>
        <p>
          React has been running for {this.state.seconds} seconds. nClick: { this.state.nClicks }
        </p>
        <button onClick={ this.onPress.bind(null, this.state.nClicks + 1) }>Click</button>
      </div>
    );
  }
});

React.render(
  <App />,
  document.getElementById('example')
);

演示：http://jsbin.com/biyibu/2/edit

如何在JavaScript和React Native中执行一段代码一段时间？

1 个答案: