Warum ClearInterval funktioniert nicht, wenn SetInterval innerhalb der Funktion war?

Question

function consoleTest() { 
    setInterval(function(){ 
    console.log('Hello World'); 
    }, 1000); 
} 

$('#button').on('click', function(){ 
    clearInterval(consoleTest); 
}); 

consoleTest(); 

Ich habe eine einfache App erstellt, wenn ich auf die Schaltfläche klicke, wird das Intervall angehalten/angehalten. Ich weiß, wie es funktioniert Ich muss nur eine Variable außerhalb der Funktion deklarieren und dort das setInterval enthalten, jetzt bin ich nur verwirrt, warum clearInterval nicht funktioniert, wenn ich es über eine Funktion anrufe, jemand bitte erkläre es mir.

Answer 1

Dies ist die korrekte Verwendung von setInterval und cleaInterval. setInterval gibt einen Wert zurück, den Sie in einer Variablen für beide Funktionen behalten müssen. Wenn Sie das Intervall löschen möchten, verwenden Sie clearInterval und die Variable als Parameter übergeben:

var interval; 

function consoleTest() { 
    interval = setInterval(function() { 
     console.log('Hello World'); 
    }, 1000); 
} 

$('#button').on('click', function() { 
    clearInterval(interval); 
}); 

consoleTest(); 

Weiterführende Literatur: clearInterval und setInterval.

Answer 2

Es gibt zwei Probleme hier. Zuerst legen Sie die zurückgegebene Timer-ID nicht von setInterval() irgendwo fest. consoleTest ist die Funktion, die den Timer umschließt, kein Verweis auf den Timer, der clearInterval() sein sollte. Zweitens muss diese Zeitgeberreferenz im Umfang beider Funktionen enthalten sein. In diesem Sinne versuchen Sie dies:

function consoleTest() { 
    return setInterval(function(){ 
    console.log('Hello World'); 
    }, 1000); 
} 

$('#button').on('click', function(){ 
    clearInterval(interval); 
}); 

var interval = consoleTest();