title: stop and restart function with setTimeout() method with buttons
body: <p>I created a function that picks colors from an array to change the background color. After being visited, picking from array will restart. Then I added two buttons in <code>&lt;body&gt;</code> element to stop and restart the color picking, I want the function to continue picking color by the point I pressed the "stop" button when I select the "restart" button.
  I tried this way but it restarts from the first element of the array:</p>
  
  <pre><code>$(document).ready(() =&gt; {
      const colors = ['blue','red','yellow','green'];
      let loop;
      function start(i){
        if(i &lt; colors.length){
          loop = setTimeout(function(){
            $('body').css("backgroundColor", colors[i]);
            i++;
            if (i &gt;= colors.length) {
              i = 0;
            }
            start(i);
          }, 1000);
        }
      }
  
      $('#btnStop').on('click', () =&gt; {
        clearTimeout(loop);
      });
  
      $('#btnRestart').on('click', () =&gt; {
        loop = start(0);
      });
  
      start(0);
    })
  </code></pre>