Cómo borrar un tiempo de espera Javascript thats establecer dentro de una función

Question

Tengo una función de tipo recursivo en Javascript que funciona de esta manera:

function loadThumb(thumb) { 
    rotate=setTimeout(function() { 
     loadThumb(next); 
    }, delay); 
} 

Nota: He simplificado la función para que sea más fácil de leer.

he "a" etiquetas llamado así

<a href="#" onclick="loadThumb(3); clearTimeout(rotate);">Load thumb 3</a> 

Sin embargo, no CLEAROUT el temporizador, el temporizador continúa el ciclo a través de la función de la irregardless clearTimeout() ser llamado.

¿Alguna idea de por qué? Creo que podría tener algo que ver con un problema de alcance o algo así.

Answer 1

Sí, lo necesario para hacer girar una variable global. Simplemente declarar fuera de la función de este modo:

var rotate; 
var delay = 1000; 

function loadThumb(thumb) { 
    alert("loading thumb: " + thumb); 
    rotate = setTimeout(function() { 
     loadThumb(thumb + 1); 
    }, delay); 
} 

Además, es necesario asegurarse de que se borre el tiempo de espera antes de se llama a loadThumb. De lo contrario, borrará el temporizador que acaba de comenzar.

<a href="#" onclick="clearTimeout(rotate); loadThumb(3);">Load thumb 3</a> 

violín: http://jsfiddle.net/63FUD/

Answer 2

return false en el enlace

Puesto que usted no está utilizando rotación var, no debería ser un problema de alcance desde rotar estaría en el ámbito ventana. ¿Puedes mostrar el código completo?

Se considera mala codificación a inline el guión - debe acoplar el proceso de carga controlador de eventos de la página

también que no debería tener el setTimeout dentro de una función que podría ser llamado para una imagen

Try esto:

var rotate,next=1; 
function loadThumb(thumb) { 
    if (thumb) ... use thumb 
    else ... use next 
} 

function slide() { 
    rotate=setInterval(function() { 
     loadThumb(); 
     next++; 
     if (next>=images.length) next=0; 
    }, delay); 
} 

window.onload=function() { 
    var links = document.getElementsByTagName("a"); 
    if (links[i].className==="thumbLink") { 
    links[i].onclick=function() { 
     var idx = this.id.replace("link",""); 
     loadThumb(idx); 
     clearInterval(rotate); 
     return false; 
    } 
    } 
    document.getElementById("start").onclick=function() { 
    slide(); 
    return false; 
    } 
    document.getElementById("stop").onclick=function() { 
    clearInterval(rotate); 
    return false; 
    } 
    slide(); 
} 

suponiendo

<a href="#" id="start">Start</a> 
<a href="#" id="stop">Stop</a> 

<a href="#" id="link0" class="thumbLink">Show 1</a> 
<a href="#" id="link1" class="thumbLink">Show 2</a> 
<a href="#" id="link2" class="thumbLink">Show 3</a> 

Answer 3

puede ser el tema de alcance así que gire como variable global y llamar clearTimeout(rotate);

refieren clearTimeout() example

Answer 4

Puede ser una cuestión de alcance si no está declarando rotate externamente.

Prueba esto:

var rotate = 0; 
function loadThumb(thumb) { 

    rotate=setTimeout(function() { 
     loadThumb(next); 
    }, delay); 

} 

Answer 5

No estoy seguro de qué es exactamente lo que está haciendo, porque por lo que puedo ver que no le envió todo el código, pero esto se ve mejor para mí:

function loadThumb(thumb) { 

    return setTimeout(function() { 
     loadThumb(next); 
    }, delay); 

} 

y luego:

<a href="#" onclick="clearTimeout(loadThumb(3));">Load thumb 3</a> 

Answer 6

Si usted tiene que manejar múltiples tiempos de espera, puede utilizar un objeto en el ámbito global y algunos métodos personalizados para crear y eliminar los tiempos de espera. Para acceder a los métodos, puede colocar las llamadas en el controlador onclick de sus enlaces (como en el ejemplo) o utilizar una biblioteca como jQuery para vincularlos.

<script type="text/javascript"> 
    var timeouts = timeouts || {}; 

    function createTimeout(name, milliseconds, callback) { 
     timeouts.name = setTimeout(callback, milliseconds); 
    } 

    function removeTimeout(name) { 
     if (typeof(timeouts.name) !== undefined) { 
      clearTimeout(timeouts.name); 
      timeouts.name = undefined; 
     } 
    } 

    createTimeout('foo', 5000, function() { 
     alert('timeout') 
    }); 
</script> 

También he publicado un ejemplo de jsFiddle http://jsfiddle.net/AGpzs/