प्रतिक्रियाओं में एक टाइमआउट रोक रहा है?

Question

क्या कोई तरीका है कि मैं प्रतिक्रियाओं में एक टाइमआउट को मार सकता/सकती हूं (छुटकारा पाएं)?

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

किसी प्रकार के क्लिक या एक्शन पर, मैं टाइमआउट को पूरी तरह से बंद और समाप्त करने में सक्षम होना चाहता हूं। क्या इसे करने का कोई तरीका है? धन्यवाद।

Answer 1

आप उपयोग करना चाहिए:

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

मान लें कि यह एक घटक के अंदर हो रहा है, टाइमआउट आईडी स्टोर करें ताकि इसे बाद में रद्द किया जा सके। अन्यथा, आपको आईडी को कहीं और स्टोर करने की आवश्यकता होगी, इसे बाहरी स्टोर ऑब्जेक्ट की तरह बाद में एक्सेस किया जा सकता है।

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) 
    } 
} 

आप कुछ यूआई जो एक समय समाप्ति लंबित है या नहीं, इस पर निर्भर करता है, तो आप ' आईडी को इसके बजाय उपयुक्त घटक के राज्य में स्टोर करना चाहते हैं।

mixins

Answer 3

के बाद से प्रतिक्रिया mixins अब पदावनत कर रहे हैं, यहाँ का एक उदाहरण है एक उच्च आदेश घटक जो स्वीकार किए गए उत्तर में वर्णित वही कार्यक्षमता देने के लिए किसी अन्य घटक को लपेटता है। यह अनमाउंट पर किसी भी शेष टाइमआउट को साफ-साफ करता है, और बच्चे को घटक को एपीआई को प्रोप के माध्यम से प्रबंधित करने देता है।

यह ES6 कक्षाओं का उपयोग करता है और component composition जिसमें mixins को बदलने के लिए सिफारिश की रास्ता है 2017.

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