arrêter un timeout dans reactjs?

Est-il une manière que je peux tuer/(débarrasser) un délai d'attente dans reactjs?

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

Sur une sorte de clic ou de l'action, je veux être en mesure d'arrêter complètement et à la fin du délai d'attente. Est-il un moyen de faire cela? merci.

source d'informationauteur BlueElixir | 2015-04-08

  1. 9

    Vous devez utiliser mixin:

    //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;

    ...et dans votre composant:

    //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;

    Plus d'infos: https://facebook.github.io/react/docs/reusable-components.html

  2. 12

    En supposant que ce qui se passe à l'intérieur d'un composant, de stocker le délai id de sorte qu'il peut être annulée plus tard. Sinon, vous aurez besoin de stocker l'id d'autre part il peut être consulté à partir plus tard, comme un magasin externe de l'objet.

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

//...elsewhere...

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

    Vous voudrez aussi pour s'assurer que le délai d'attente est annulé en componentWillUnmount() trop:

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

    Si vous disposez d'une INTERFACE utilisateur qui dépend de l'existence ou non d'un délai d'attente en attente, vous aurez envie de stocker l'id du composant approprié de l'état.

  3. 8

    Depuis Réagir mixin sont désormais obsolète, voici un exemple d'un ordre plus élevé composant qui enveloppe un autre composant de donner les mêmes fonctionnalités que décrit dans la accepté de répondre. Il nettoie parfaitement les délais d'attente sur le démonter, et donne à l'enfant composant d'une API pour gérer ce par le biais d'accessoires.

    Il utilise ES6 classes et la composition de composant qui est la méthode recommandée pour remplacer mixin en 2017.

    En 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;

    Dans Moncomposant.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);
  4. 1

    Je me suis arrêté un setTimeout dans mon réagir app avec Javascript uniquement:

    (mon cas d'utilisation était de s'auto-enregistrer seulement après une nette 3 secondes sans touches)

    timeout;

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

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

    });
}