Exit mulitple For Schleifen mit Klick-Funktion

Question

Ich habe drei for Schleifen.

function slow() { 
    for (var j = 0; j < 1000000; j++) { 
    (function main(j) { 
     setTimeout(function() { 
     $(e).trigger("play"); 
     $(e).trigger("rerender"); 
     $('#Generation').text('Generation: ' + j); 
     }, 1000 * j/2); 
    }(j)); 
    } 
}; 

Die restlichen zwei for Schleifen sind die gleichen, außer mit einer Geschwindigkeit von Iteration Unterschiede.

Ich möchte diese drei Schleifen mit einer einzigen jQuery-Klickfunktion beenden/brechen. durch einen Klick auf eine Schaltfläche mit der ID 'stop'.

Wie kann ich das tun?

Das ist mein pen

Answer 1

dies versuchen ..

<script> 
     $(function(){ 

      var Break = false; // Declare this above your for loop function 

      $("#btnStop").click(function(e){ 
       e.preventDefault(); 
       Break = true; 
      }); 

      function slow() { 
      for (var j = 0; j < 1000000; j++) { 
       if(Break){break;} // Check this for each 3 for loop 
       (function main(j) { 
        setTimeout(function() { 
        $(e).trigger("play"); 
        $(e).trigger("rerender"); 
        $('#Generation').text('Generation: ' + j); 
        }, 1000 * j/2); 
       }(j)); 
       } 

       // I'm repeating same for loop for illustration. 
       for (var j = 0; j < 1000000; j++) { 
       if(Break){break;} // Check this for each 3 for loop 
       (function main(j) { 
        setTimeout(function() { 
        $(e).trigger("play"); 
        $(e).trigger("rerender"); 
        $('#Generation').text('Generation: ' + j); 
        }, 1000 * j/2); 
       }(j)); 
       } 

       for (var j = 0; j < 1000000; j++) { 
       if(Break){break;} // Check this for each 3 for loop 
       (function main(j) { 
        setTimeout(function() { 
        $(e).trigger("play"); 
        $(e).trigger("rerender"); 
        $('#Generation').text('Generation: ' + j); 
        }, 1000 * j/2); 
       }(j)); 
       } 
      }; 
     }) 
    </script>