jQuery - ¿Cómo reiniciar setInterval después de matarlo con clearInterval?

Question

Quiero crear una página con 2 botones, 'MANTENER' y 'Salir'. Hay un iFrame debajo de los botones. Cuando la página se carga por primera vez, el iFrame comienza a refrescarse automáticamente después de 10 segundos. Cuando el usuario golpea el botón EN CASA, dejará de refrescarse. Después de eso, si presiona el botón LEAVE, el iFrame comenzará nuevamente a refrescarse después de 10 segundos. Estoy usando este código:

$(document).ready(function() { 
    var refreshIntervalId = setInterval("update()", 10000); 

    $('#leave').click(function() { 
     var refreshIntervalId = setInterval("update()", 10000);; 
    }) 

    $('#stay').click(function() { 
     clearInterval(refreshIntervalId); 
    }) 
}); 

function update(){ 
    var url = "load.php"; 
    $('iframe#ifrm').attr('src', url); 
} 

<div id="bar"> 
    <div class= "button" id="stay"> 
    <a>Stay</a> 
    </div> 
    <div class= "button" id="leave"> 
    <a>Leave</a> 
    </div> 
</div> 

pero no funciona, estoy usando clearInterval en el camino equivocado?

Answer 1

Creo que necesita extraer el ID de intervalo establecido fuera del alcance de la función.

var refreshIntervalId; 
$('#leave').click(function() { 
     refreshIntervalId = setInterval(update, 10000); 
     }) 
$('#stay').click(function() { 
      clearInterval(refreshIntervalId); 
     }) 
}); 

Tal vez algunos de validación comprobando en la variable refreshIntervalId también ...

if(refreshIntervalId!=null){ 
    // Do something with the interval id 
} 

Answer 2

En primer lugar no se puede definir una variable en la función #leave clic y utilizarlo en la función #stay clic.

utilizar de esta manera:

var refreshIntervalId = null; 

$('#leave').click(function() { 
    refreshIntervalId = setInterval("update()", 10000); 
}) 
$('#stay').click(function() { 
    clearInterval(refreshIntervalId); 
}) 

Answer 3

Es una cuestión de alcance. Eso significa que donde sea que pones la "var" define qué funciones tienen acceso a la variable. Si define la variable fuera de todas las funciones como en el ejemplo de Tricker, cualquier función en su documento tiene acceso a ese valor.

ejemplo de Tricker previamente colocado:

var refreshIntervalId = null; 

$('#leave').click(function() { 
    refreshIntervalId = setInterval("update()", 10000); 
}) 
$('#stay').click(function() { 
    clearInterval(refreshIntervalId); 
}) 

A veces todo el documento no necesitan tener acceso a la variable, por lo que desea ponerlo dentro de una función.