Warum ist dieser Fehler "Uncaught ReferenceError: tempo ist nicht definiert"?

Question

Ich habe den folgenden Code bekam:

$("#avvia_cronometro").click(function() { 
    var tempo = setInterval(function() { 
     cronometro(); 
     $("#tempo_cronometro").html((h)+":"+(min)+":"+(sec)); 
    }, 1000); 
}); 
$("#stop_cronometro").click(function() { 
    clearInterval(tempo); 
}); 

function cronometro() { 
    if (sec == 59) { 
     min +=1; 
     if (min == 59) { 
      h+=1; 
      min=0; 
     } 
     sec=0; 
    } 
    sec+=1; 
} 

Wenn ich auf #stop_cronometro klicken funktioniert es nicht, und es sagt:

Uncaught ReferenceError: tempo is not defined 

Wie kann ich das beheben?

Wenn ich auf #avvia_cronometro klicke, beginnt es mit der Zeit, also ist es Arbeit.

Answer 1

Da keine Variable tempo ist es, die im globalen Bereich existieren (oder einem Umfang, dass der Handler Anschlag Klick erreichen können).

Wenn deklarieren Sie eine Variable mit var innerhalb einer Funktion, dass Variable gelöscht wird, wenn die Funktion zurückgibt:

function foo() { 
    var bar = 1; 
} 
foo(); 
console.log(bar); // uncaught reference error - "bar" doesn't exist 

Wenn Sie eine globale Variable benötigen, verwenden Sie es ohne die var:

function foo() { 
    bar = 1; 
} 
foo(); 
console.log(bar); // prints 1 

Allerdings würde ich dies im Allgemeinen nicht empfehlen, da es für zukünftige Betreuer wie ein Fehler aussieht. Stattdessen die globale Variable explizit im globalen Bereich erklären zu zeigen deutlich, Ihre Absicht:

var bar = null; 
function foo() { 
    bar = 1; 
} 
foo(); 
console.log(bar); // prints 1 

Answer 2

Da Sie das Intervall löschen, bevor es ausgeführt wird. Handle Tempo nicht definiert in wenn. SetInterval ist ein asynchronous-Aufruf.

Answer 3

Nun, es passiert, weil der Variablenbereich in separaten Funktionen, wenn eine Variable innerhalb einer Funktion deklariert ist, nur für sich selbst und die untergeordneten Funktionen zugänglich ist.

In Ihrem Fall schlage ich vor, Sie "Tempo" Variable global machen:

var tempo = null; 
$("#avvia_cronometro").click(function() { 
    tempo = setInterval(function() { 
     cronometro(); 
     $("#tempo_cronometro").html((h)+":"+(min)+":"+(sec)); 
    }, 1000); 
}); 
$("#stop_cronometro").click(function() { 
    clearInterval(tempo); 
}); 

function cronometro() { 
    if (sec == 59) { 
     min +=1; 
     if (min == 59) { 
      h+=1; 
      min=0; 
     } 
     sec=0; 
    } 
    sec+=1; 
}