Beenden einer Schleife mit einem click-Ereignis jQuery

Ich bin auf der Suche nach einem Weg zu stoppen, eine Schleife mit einem click-Ereignis(eine Art Panik-Knopf). Wenn Sie klicken Sie auf die Schaltfläche, es sollte aufhören, sofort.

//grundlegende Idee

$.each(someArray, function(index, value){
    setTimeout(function(){
          console.log(index);
     },5000*index);
});


$('#panic-button').click(function(){
    //the code that should stop the looping
}):
InformationsquelleAutor user759235 | 2012-07-12
  1. 3

    Können Sie unterbrechen nicht den $.each Schleife mit einem click handler sobald die Schleife gestartet wurde. Die Ausführung von JavaScript ist single-threaded, so dass die click handler am besten auf der Warteliste für das nächste mal, wenn der thread frei ist -- nachdem die Schleife beendet wurde.

    Jedoch als Timer asynchron ausgeführt haben, können Sie diese Abbrechen, indem Sie halten und löschen jede Ihrer IDs:

    var timeouts = [];

$.each(someArray, function(index, value){
    timeouts.push(setTimeout(function(){
          console.log(index);
     },5000*index));
});


$('#panic-button').click(function(){
    $.each(timeouts, function (_, id) {
       clearTimeout(id);
    });

    timeouts = [];
}):
    InformationsquelleAutor Jonathan Lonowski
  2. 2

    Wenn Sie möchten, um eine Schleife in the background dass Sie kündigen, haben Sie, um zu simulieren, weil js ist im wesentlichen single-threaded ist, und die Schleife wird blockiert, bis er abgeschlossen ist, dann werden Sie in der Lage, auf eine Schaltfläche klicken.

    Hier ist ein Beispiel, es verwendet, settimeout, um zu simulieren eine Schleife, die abgebrochen werden können durch einen Klick

    FIDDLE

    InformationsquelleAutor Musa
  3. 1

    Erstellen, die die Funktion zurückgeben einen Wert außerhalb des $.jedes (), und verwenden einer flag-variable, um zu bestimmen, ob oder nicht die Taste, auf die geklickt wurde. Ich in der Regel deklarieren Sie die globalen Funktionen und Variablen, die mit "Fenster".

    var panicButtonClicked = false;  
window.panicButtonClicked = panicButtonClicked;
var timeouts = [];
window.timeouts = timeouts;

$.each(someArray, function(index, value){
    if( !panicButtonClicked )
    {
         timeouts.push( setTimeout(function(){
          console.log(index);
         }, 5000*index) );
    }
});

$('#panic-button').click(function(){
    //the code that should stop the looping
    panicButtonClicked = true;
    $.each(timeouts, function (_, id) {
        clearTimeout(id);
    });
});

    Habe ich die for-Schleife gegeben, die von Jonathan Lonowski in meinem edit. Die Idee ist ähnlich, außer, dass müssten Sie eine zusätzliche variable, um zu verhindern, dass Ihre erste Schleife ausgeführt wird. Tut dies Ihr problem lösen ?

    InformationsquelleAutor Cosmin Atanasiu
  4. 0

    Du bist Antwort ist sehr einfach:

    Hinzufügen var $theTimeout = vor setTimeout und klar, dass es in Ihrem click handler: clearTimeout($theTimeout).

    http://www.w3schools.com/js/js_timing.asp

    • Das wird nicht funktionieren, es gibt mehrere Timer angelegt, da es in einer each konstruieren. Sie müssten, um Sie zu speichern in einem array und clearTimeout auf alle von Ihnen
    InformationsquelleAutor Anriëtte Myburgh
Schreibe einen Kommentar