title: How to clearTimeout an async function when componentWillUnmount in a Reactjs component?
body: <p>Here is the component:</p>
  
  <pre><code>class ChartComp extends Component{
      constructor(props){
          super(props);
          this.timer = null;
          this.loadData = this.loadData.bind(this);
      }
  
      componentWillMount(){
          this.loadData();
      }
  
      componentWillUnmount(){
          if(this.timer){
              clearTimeout(this.timer);
          }
      }
  
      loadData(){
          //...
          getJSON(url, msg=&gt;{ //get data from server
              if(msg.success){
                  //...
                  this.timer = setTimeout(()=&gt;{this.loadData()}, 30000); //get data and rerender the component every 30s
              }
          })
      }
  
      render(){
          //...
      }
  }
  </code></pre>
  
  <p>The clearTimeout function will be called before the component is unmounted. But the timer is in an async function, and it starts again after I got response from server. So how can I make clearTimeout work?</p>