Come cancellare un timeout javascript thats impostare all'interno di una funzione

Question

Ho una funzione di tipo ricorsivo in Javascript che gira in questo modo:

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

Nota: Ho semplificato la funzione per rendere più facile da leggere.

ho "a" tag chiamato come questo

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

Tuttavia, essi non Clearout il timer, il timer continua a scorrere la funzione Indipendentemente dal clearTimeout() essere chiamato.

Qualche idea, perché? Penso che potrebbe avere qualcosa a che fare con un problema di scope o qualcosa del genere.

Answer 1

Sì, è necessario fare ruotare una variabile globale. Basta dichiararlo fuori della funzione in questo modo:

var rotate; 
var delay = 1000; 

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

Inoltre, è necessario assicurarsi di cancellare il timeout prima di di chiamare loadThumb. Altrimenti cancellerai il timer che hai appena iniziato.

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

violino: http://jsfiddle.net/63FUD/

Answer 2

Return falsa sul link

Dal momento che non si utilizza var rotazione, non dovrebbe essere un problema di scoping in quanto la rotazione sarebbe nel campo di applicazione della finestra. Puoi mostrare il codice completo?

E 'considerato povero codifica inline lo script - dovete attaccare l'onload gestore di eventi della pagina

Inoltre non dovrebbe avere la setTimeout all'interno di una funzione che potrebbe essere chiamato per un'immagine

Try questo:

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(); 
} 

assumendo

<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

esso può essere il problema di portata in modo da fare ruotare come variabile globale e chiamare clearTimeout(rotate);

riferiscono clearTimeout() example

Answer 4

può essere un problema scoping se non si stiano dichiarando rotate esternamente.

Prova questo:

var rotate = 0; 
function loadThumb(thumb) { 

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

} 

Answer 5

Non sono sicuro di cosa esattamente si sta facendo, perché per quanto posso vedere che non ho postato tutto il codice, ma questo sembra meglio per me:

function loadThumb(thumb) { 

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

} 

e poi:

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

Answer 6

Se si dispone di gestire più timeout, è possibile utilizzare un oggetto nel campo di applicazione globale e alcuni metodi personalizzati per creare e rimuovere i timeout. Per accedere ai metodi puoi mettere le chiamate nel gestore onclick dei tuoi link (come nell'esempio), o usare una libreria come jQuery per vincolarli.

<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> 

ho anche postato un esempio su jsFiddle http://jsfiddle.net/AGpzs/