javascript - 如何从另一个组件中清除一个组件的间隔函数？

Question

父组件

handleSubmitValidateInput: function(e){
    e.preventDefault();
    var data = {phone: this._phone.value, pwd: this._pwd.value}
    $.ajax({
        type: 'POST',
        data:data,
        url: 'http://localhost:3000/login',
        success: function(data){
            ReactDOM.render(<Home UserDetails={data}/>, document.getElementById('content'));
            var idleTime = 0;
            var interval = setInterval(function(){
                      // some code
                });
            }, (1000));
        },
        error: function(error){
            console.log('Error login!!');
        }
    });
},

我想从 Home 组件中清除 interval。我怎样才能做到这一点？请向我解释一下。下面的函数属于 Home 组件。 我想从注销功能中清除间隔。

handleLogout: function(e){
    e.preventDefault();
    console.log('Cleared');
    localStorage.clear();
    ReactDOM.render(<Login />, document.getElementById('content'));
},

Answer 1

尝试使用 window 对象，而不是使用局部变量。

window.interval = setInterval(function(){
  // some code
});

然后你可以从你的注销函数中清除它

handleLogout: function(e){
  e.preventDefault();
  clearTimeout(window.timeout);
  console.log('Cleared');
  localStorage.clear();
  ReactDOM.render(<Login />, document.getElementById('content'));
},

如果您不想使用 window 对象，当然还有其他实现方法。然而，这应该是最短/最简单的方法。

---

可以找到一个简单的Demo here或在下面的代码片段中。检查控制台的输出。

var Start = React.createClass({
  start: function() {
    console.log("Timeout started")
    window.timeout = setTimeout(function(){
      console.log("Timeout ended")
    }, 2000);
  },
  render: function() {
    return <button onClick={this.start}>Set Timeout</button>;
  }
});

var Stop = React.createClass({
  stop: function() {
    clearTimeout(window.timeout);
    console.log("Timeout cleared");
  },
  render: function() {
    return <button onClick={this.stop}>Clear Timeout</button>;
  }
});

ReactDOM.render(
  <div>
  	<Start />
    <Stop />
  </div>,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>