title: Stop for loop using break on click
body: <p>I have this simple loop from 1-20. What I'm trying to do is to stop the loop using a button click. What I did is, I put a condition that upon button click the value of the variable <code>stop</code> will be changed to 1, which will trigger the <code>break</code>. But the value is not changed.</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 stop = 0;
  for(let i = 1; i &lt;= 20; i++){
    
    if(stop === 1){
      break;
    }
    
    setTimeout(function(){
      $('ul').append('&lt;li&gt;'+ i +'&lt;/li&gt;');
    },i * 500);
  }
  
  $('button').click(function(){
      stop = 1;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul li{
    list-style-type: none;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul&gt;&lt;/ul&gt;
  
  &lt;br&gt;
  &lt;button&gt;stop&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>