Question

我有没有办法在reactjs中杀死/（摆脱）超时？

setTimeout(function() {
//do something
}.bind(this), 3000);

通过某种点击或操作，我希望能够完全停止并结束超时。有没有办法做到这一点？感谢。

Answer 1

假设在组件内部发生这种情况，请存储超时ID，以便稍后取消。否则，您需要将id存储在稍后可以从以后访问的其他位置，就像外部存储对象一样。

this.timeout = setTimeout(function() {
  // Do something
  this.timeout = null
}.bind(this), 3000)

// ...elsewhere...

if (this.timeout) {
  clearTimeout(this.timeout)
  this.timeout = null
}

您可能还想确保在componentWillUnmount()中取消任何待处理的超时：

componentWillUnmount: function() {
  if (this.timeout) {
    clearTimeout(this.timeout)
  }
}

如果你有一些UI取决于超时是否未决，你需要将id存储在相应组件的状态中。

Answer 2

你应该使用mixins：

// file: mixins/settimeout.js:

var SetTimeoutMixin = {
    componentWillMount: function() {
        this.timeouts = [];
    },
    setTimeout: function() {
        this.timeouts.push(setTimeout.apply(null, arguments));
    },

    clearTimeouts: function() {
        this.timeouts.forEach(clearTimeout);
    },

    componentWillUnmount: function() {
        this.clearTimeouts();
    }
};

export default SetTimeoutMixin;

......并在您的组件中：

// sampleComponent.js:
import SetTimeoutMixin from 'mixins/settimeout'; 

var SampleComponent = React.createClass({

    //mixins:
    mixins: [SetTimeoutMixin],

    // sample usage
    componentWillReceiveProps: function(newProps) {
        if (newProps.myValue != this.props.myValue) {
            this.clearTimeouts();
            this.setTimeout(function(){ console.log('do something'); }, 2000);
        }
    },
}

export default SampleComponent;

更多信息：https://facebook.github.io/react/docs/reusable-components.html

Answer 3

由于现在不推荐使用React mixins，所以这里是一个高阶组件的示例，它包含另一个组件以提供与接受的答案中描述的功能相同的功能。它可以在卸载时整齐地清除任何剩余的超时，并为子组件提供API以通过道具来管理它。

这使用ES6类和component composition，这是2017年替换mixins的推荐方法。

在Timeout.jsx

import React, { Component } from 'react';

const Timeout = Composition => class _Timeout extends Component {
    constructor(props) {
      super(props);
    }

    componentWillMount () {
      this.timeouts = [];
    }

    setTimeout () {
      this.timeouts.push(setTimeout.apply(null, arguments));
    }

    clearTimeouts () {
      this.timeouts.forEach(clearTimeout);
    }

    componentWillUnmount () {
      this.clearTimeouts();
    }

    render () {
      const { timeouts, setTimeout, clearTimeouts } = this;

      return <Composition 
        timeouts={timeouts} 
        setTimeout={setTimeout} 
        clearTimeouts={clearTimeouts} 
        { ...this.props } />
    }
}

export default Timeout;

在MyComponent.jsx中

import React, { Component } from 'react';
import Timeout from './Timeout';    

class MyComponent extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount () {
    // You can access methods of Timeout as they
    // were passed down as props.
    this.props.setTimeout(() => {
      console.log("Hey! I'm timing out!")
    }, 1000)
  }

  render () {
    return <span>Hello, world!</span>
  }
}

// Pass your component to Timeout to create the magic.
export default Timeout(MyComponent);

Answer 4

我在我的反应应用程序中仅使用Javascript停止了一个setTimeout：

（我的用例是仅在没有击键的3秒后自动保存）

timeout;

handleUpdate(input:any) {
    this.setState({ title: input.value }, () => {

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => this.saveChanges(), 3000);

    });
}

在reactjs中停止超时？

4 个答案: