在 reactjs 中停止超时？

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 来通过 props 进行管理。

这使用 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 在我的 React 应用程序中停止了 setTimeout：

（我的用例是 auto-save 只有在 3 秒内没有击键后）

timeout;

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

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

    });
}

在 reactjs 中停止超时？

stopping a timeout in reactjs?

settimeout

reactjs