Verhindern, dass innere Funktion ausgeführt wird

Question

Anforderung ist ziemlich einfach, aus einigen Gründen kann ich das nicht aussortieren. Äußere Funktion ruft innere Funktion auf. Die innere Funktion ist asynchron und ruft die innere Funktion auf, wenn die Bedingung erfüllt ist. Alles in Ordnung - jetzt Benutzer kann äußere Funktion ausführen, während innere Funktion läuft. Ich möchte, dass die innere Funktion sofort aufhört zu arbeiten und neu anzufangen.

document.getElementById("demo").addEventListener("click", function() { 
demo_click(); 
}); 
// 
function demo_click() { 
var idnum = 0; 
var length = 25; 
innerFunc(); 
// 
function innerFunc() { 
    if (idnum < length) { 
    console.log(idnum); 
    setTimeout(function() { 
    idnum++; 
    innerFunc(); 
    }, 500); 
    } 
} 
} 

Es wird wie erwartet von 0 bis 24 protokolliert. Hier ist Geige - https://jsfiddle.net/h7ab8u69/2/

Lösung könnte trivial sein, aber bitte schlagen Sie mir vor, was/wo die Bedingung zu setzen.

EDIT

Von Anfang an neu meinte ich, dass frühere Anrufe von innerFunc aufhören würde, und es wird die Anmeldung (Konsole) von Null beginnen. Es beginnt immer noch bei Null, aber wenn Sie zweimal klicken, dreimal und so weiter - Protokolle (Konsole) wird auch von früheren Aufrufen von InnerFunc angezeigt. Bitte besuchen Sie oben den Fiddle Link und öffnen Sie die Konsole und klicken Sie auf den Button - das Problem ist offensichtlich.

PS

SetTimeout nur asynchroner Aufruf anzuzeigen. In meinem Code ist das Image.onLoad -Ereignis. Daher ist das Löschen des Timeouts keine Option. Grundsätzlich lade ich Bild nach dem anderen auf Knopfdruck. Ich möchte das vorherige Laden beenden und das Laden mit einem weiteren Klick starten. Um es einfach zu machen, habe ich SetTimeout verwendet.

Answer 1

Was ich verstanden habe ist, dass Sie etwas Code ausführen möchten und stoppen Sie es, wenn Sie die äußere Funktion erneut ausführen. Wenn es kein Timeout ist, müssen Sie eine globale Variable verwenden.

var clickCount=0; 

function demo_click() { 
var idnum = 0; 
var length = 25; 
clickCount++; 
var thisCount = clickCount; 
// stop the loop before starting again 

innerFunc(); 
    function innerFunc() { 
    if (idnum < length) { 
    console.log(idnum); 



    for(var i =0 ; i < imgarraylength; i++){ 
     if(thisCount < clickCount){ 
     break; 
     } 
     idnum++; 
     innerFunc(); 
    } 
    } 
    } 
} 

Ich hoffe, es hilft.