title: How to stop effect of click during setTimeout?
body: <p>I have a simple function which change opacity of divs every x seconds.
  When I click on &quot;pause button&quot;, this one make a pause in this loop, and get the color of the current div. When I click a second time on this button, the loop restart to play after a <code>setTimeout</code>.
  My problem is that when I multi click (fast) on button, there is a bug in the loop.
  My condition doesn't work.</p>
  <p>Is there a solution to stop effect of click during <code>setTimeout</code> with <code>stopPropagation</code> or <code>e.preventDefault</code> or something else?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var j = 0;
  var myElements = document.querySelectorAll('.div_child');
  var myButton = document.querySelector('.my_button');
  
  var colorArray = []
  for (let i = 0; i &lt; myElements.length; i++) {
    let currentColor = getComputedStyle(myElements[i]).backgroundColor;
    colorArray[i] = currentColor;
  }
  
  function my_fonction() {
    myElements[j].style.opacity = 1;
    for (let k = 0; k &lt; myElements.length; k++) {
      if (k != j) {
        myElements[k].style.opacity = 0;
      }
    }
    j++;
    if (j == myElements.length) {
      j = 0
    }
    playForbidden = false;
  }
  
  function setIntervalAndExecuteFn(fn, t) {
    fn();
    return (setInterval(fn, t));
  }
  
  var myIndice = j;
  var myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
  var play = true;
  var playForbidden = false;
  
  myButton.addEventListener('click', function() {
    if (playForbidden == false) {
      if (play == true) {
        play = false;
        clearInterval(myIntervalId);
        if (j == 0) {
          myIndice = myElements.length - 1;
        } else {
          myIndice = j - 1;
        }
        myButton.style.backgroundColor = colorArray[myIndice]
      } else {
        play = true;
        myButton.style.backgroundColor = 'transparent';
        setTimeout(function() {
          myIntervalId = setIntervalAndExecuteFn(my_fonction, 1000);
        }, 500);
      }
      playForbidden == true;
    } else {
      return;
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.div_parent {
    position: relative;
    width: 500px;
    height: 300px;
    border: 1px solid black;
  }
  
  .my_button {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    padding: 20px;
    color: black;
  }
  
  .div_child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 500px;
    height: 300px;
  }
  
  .div_child_one {
    opacity: 0;
    background-color: red;
  }
  
  .div_child_two {
    opacity: 0;
    background-color: green;
  }
  
  .div_child_three {
    opacity: 0;
    background-color: violet;
  }
  
  .div_child_four {
    opacity: 0;
    background-color: rgb(104, 104, 104);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="div_parent"&gt;
    &lt;div class="div_child div_child_one"&gt;&lt;/div&gt;
    &lt;div class="div_child div_child_two"&gt;&lt;/div&gt;
    &lt;div class="div_child div_child_three"&gt;&lt;/div&gt;
    &lt;div class="div_child div_child_four"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="my_button"&gt;PAUSE BUTTON&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>