title: How to clear a sequence of audio with timeouts in React
body: <p>I have set 4 timeout for audios in my application and I need to stop the audios after user click. The macro function is working correctly, however the clearTimout does not stop the sound. Anyone knows how to clear it?</p>
  <pre><code>export function handlePlay(audio) {
    audio.currentTime = 0;
    return audio.play();
  }
  
  export function handleConversation(clear) {
    const timer1 = () =&gt; setTimeout(() =&gt; {
      handlePlay(conversation[Math.floor(Math.random() * conversation.length)]);
    }, TIME1);
  
    const timer2 = () =&gt; setTimeout(() =&gt; {
      handlePlay(conversation[Math.floor(Math.random() * conversation.length)]);
    }, TIME2);
  
    const timer3 = () =&gt; setTimeout(() =&gt; {
      handlePlay(conversation[Math.floor(Math.random() * conversation.length)]);
    }, TIME3);
  
    const timer4 = () =&gt; setTimeout(() =&gt; {
      handlePlay(conversation[Math.floor(Math.random() * conversation.length)]);
    }, TIME4);
  
    if (clear) {
      console.log('enter clear');
      return () =&gt; {
        clearTimeout(timer1);
        clearTimeout(timer2);
        clearTimeout(timer3);
        clearTimeout(timer4);
      };
    }
    timer1();
    timer2();
    timer3();
    timer4();
  }
  </code></pre>