title: How to loop a function in javascript
body: <p>I have four different button effects where each effect are declared in a variable.</p>
  
  <p>Therefore, I bring all of these four variables and place them within an array called arr in which is used in the <code>clickByItself()</code> function using <code>Math.floor(Math.random())</code> methods. </p>
  
  <p>Without the <code>for</code> loop, the code clicks by itself randomly in one of the four buttons every time I reload the page. </p>
  
  <pre><code>function clickByItself() {
     let random = Math.floor(Math.random() * arr.length);
     $(arr[random]).click();
  }
  </code></pre>
  
  <p>However, using the <code>for</code> loop I am not being able to make these clicks one-by-one within the maximum of 10 times. </p>
  
  <pre><code>var blueButtonEffect = code effect here;
  var redButtonEffect = code effect here;
  var greenButtonEffect = code effect here;
  var yellowButtonEffect = code effect here;
  var arr = [blueButtonEffect, redButtonEffect, greenButtonEffect, yellowButtonEffect];
  
  //will click on buttons randomly
  function clickByItself() {
      let random = Math.floor(Math.random() * arr.length)
      var i;
      for (i = 0; i &lt; 10; i++) {
          $(arr[random]).click();
          setTimeout(clickByItself(), 1000);
      }
  }
  </code></pre>
  
  <p>The final output with the current code above is the four buttons being clicked at the same time, not one-by-one. </p>
  
  <p>So, how can I have this function to press a random button by 10 times one-by-one with one second of interval from each click?</p>