Führen Sie eine Funktion in Timeout Looping

Question

Ich habe den folgenden Code:

// After 8 seconds change the slide... 
     var timeout = setTimeout("changeSlide()", 8000); 

     $('div.slideshow').mouseover(function() { 

      // If the user hovers the slideshow then reset the setTimeout 
      clearTimeout(timeout); 
     }); 

     $('div.slideshow').mouseleave(function() { 

      clearTimeout(timeout); 
      var timeout = setTimeout("changeSlide()", 8000); 

     }); 

Was ich passieren soll, ist die Funktion changeSlide alle 8 Sekunden in einer Schleife laufen zu lassen, es sei denn jemand die Diashow div schwebt. Wenn sie den Cursor entfernen, dann wiederholen Sie das Timeout!

jedoch nur die Schleife einmal passiert, und der Hover nicht das Timeout stoppen oder erneut starten:/

EDIT:

Diese Schleifen großartig, aber das Schweben und Ausschalten bewirkt, dass die Funktion mehr läuft Zeiten:

// After 8 seconds change the slide... 
     var timeout = setInterval(changeSlide, 2000); 

     $('div.slide').mouseover(function() { 

      // If the user hovers the slideshow then reset the setTimeout 
      clearInterval(timeout); 
     }); 

     $('div.slide').mouseleave(function() { 

      clearInterval(timeout); 
      var timeout = setInterval(changeSlide, 2000); 

     }); 

Answer 1

Sie haben ein paar Probleme hier. Zunächst müssen Sie, wenn Sie eine Zeitüberschreitung festlegen, die Rückgabe dieses Funktionsaufrufs in einer Variablen speichern, wenn Sie sie möglicherweise stoppen möchten.

var slide_timer = setTimeout(changeSlide, 8000); 

Zweitens, wenn Sie clearTimeout (statt clearInterval) nennen, müssen Sie es ein Argument zu übergeben. Welches Argument? Diese Variable Sie gespeichert, wenn Sie setTimeout genannt

 clearTimeout(slide_timer); 

Drittens, wenn Sie setTimeout verwenden, es feuert nur einmal.setInterval wird weiterhin ausgelöst, dann würden Sie clearInterval verwenden, um es zu stoppen.

Es gibt ein Problem beim Timing mit der Verwendung von Intervallen anstelle von Timeouts. Der Browser behandelt sie auf subtile Weise und es kann für Ihren Code wichtig sein, den Unterschied zu kennen und die richtige Methode zu verwenden. Wenn Sie Intervalle verwenden, da sie nur einmal ausgelöst werden, müssen Sie das Zeitlimit jedes Mal neu festlegen, wenn es ausgelöst wird.

var slide_timer = setTimeout(function() { 
    changeSlide(); 
    var slide_timer = setTimeout(changeSlide, 8000); 
}, 8000); 

ODER

var slide_timer = setTimeout(changeSlide, 8000); 
... 
function changeSlide() { 
    ... your code ... 
    var slide_timer = setTimeout(changeSlide, 8000); 
} 

(Ich ziehe die frühere Methode)

Und schließlich, ob Sie Timeouts oder Intervalle verwenden, nicht um eine Zeichenfolge zu setTimeout passieren, eine Funktion Verweis übergeben. Siehe den Beispielcode oben, oder wie folgt aus:

var slide_timer = setTimeout("changeSlide()", 8000); // <--- DON'T 
var slide_timer = setTimeout(changeSlide, 8000);  // <--- DO 
var slide_timer = setTimeout(function() {   // <--- DO 
    changeSlide() ; 
    // other script 
}, 8000); 

Dass sie alle zusammen:

// After 8 seconds change the slide... 
    var slide_timer = setTimeout(changeSlide, 8000); 
    $('div.slideshow').hover(function() { 
     // If the user hovers the slideshow then reset the setTimeout 
     clearTimeout(slide_timer); 
    }, function() { 
     slide_timer = setInterval(changeSlide, 8000); 
    }); 

Dokumentation

• clear - https://developer.mozilla.org/en/DOM/window.clearTimeout
• SetTimeout - https://developer.mozilla.org/en/DOM/window.setTimeout
• clearInterval - https://developer.mozilla.org/en/DOM/window.clearInterval
• setInterval - https://developer.mozilla.org/en/DOM/window.setInterval
• SO beantwortet den feinen Unterschied zwischen den Intervallen und Timeouts zu diskutieren - https://stackoverflow.com/a/7900293/610573

Answer 2

Wenn Sie setTimeout (oder setInterval) angeben, es gibt einen Wert, dann für clear und clearInterval verwendet wird. Korrekte Verwendung ist wie folgt:

var timeout = setTimeout(changeSlide, 8000); 
clearTimeout(timeout); 

Beachten Sie auch, ich clear verwende, nicht clearInterval.

Sie werden auch bemerken, dass ich keine Zitate um 'changeSlide' gesetzt habe, und dass ich die Parens fallen gelassen habe. Wenn Sie eine Zeichenfolge an setTimeout übergeben, wird eval() verwendet. eval() wird im Allgemeinen empfohlen, vermieden werden. Statt dessen übergeben wir den direkten Verweis auf die Funktion (ohne Anführungszeichen). Wir tun nicht Verwendung Pars, denn das würde changeSlide tatsächlich nennen() sofort, statt die Ausführung SetTimeout aufzuschieben (und würde passieren, als Argument an setTimeout, das Ergebnis changeSlide())

EDIT: Zum Damit es kontinuierlich läuft, müssen Sie nach jedem changeSlide-Aufruf setTimeout erneut aufrufen. setTimeout wird einmal ausgeführt. Als Alternative können Sie setInterval verwenden, das automatisch wiederholt wird. Der einzige Unterschied zu setInterval ist, dass wenn das Intervall zu kurz ist und der Callback, den es aufruft, sehr lange dauert, kann es zu einer Reihe von Intervallen kommen, die nacheinander ausgeführt werden, ohne Verzögerung. Ein Intervall von 8 Sekunden würde wahrscheinlich nicht mit diesem Problem konfrontiert werden.

EDIT 2:

var timeout; 
var changeSlide = function(){ 
    // do something to change slides 
    clearTimeout(timeout); 
    timeout = setTimeout(changeSlide, 8000); 
} 

// queue up the first changeSlide, all others happen inside changeSlide 
timeout = setTimeout(changeSlide, 8000); 

$('div.slideshow').mouseleave(function() { 
    clearTimeout(timeout); 
    var timeout = setTimeout(changeSlide, 8000); 
}); 

Answer 3

Ich denke, brauchen Sie setInterval und nicht SetTimeout, da:

setTimeout (expression, timeout); Läuft den Code/die Funktion einmal nach dem Timeout

setInterval (Ausdruck, Timeout); führt den Code/die Funktion in Intervallen mit der Länge des Timeout zwischen ihnen

Answer 4

Am Ende dieses die besten gearbeitet (aber ich werde dies nicht akzeptieren, wie meine Antwort als es war andere, die mich zu diesem Punkt geholfen)

// After 8 seconds change the slide... 
    var slide_timer = setInterval(changeSlide, 2000); 
    $('div.slideshow').hover(function() { 
     // If the user hovers the slideshow then reset the setTimeout 
     clearInterval(slide_timer); 

    }, function() { 
     slide_timer = setInterval(changeSlide, 2000); 
    }); 

Answer 5

Ihre Ausgabe der Ereignis Mouseover sein kann. Das mouseover-Ereignis bläst. Wenn Sie also eine verschachtelte HTML-Struktur haben, wird das Ereignis möglicherweise mehrmals aufgerufen. Wenn Sie jQuery verwenden, sollten Sie das Ereignis mousenter verwenden, das nur einmal für das Element aufgerufen wird.

Bei einer anderen Anmerkung, verwenden Sie anstelle setInterval ein SetTimeout-Muster. So etwas wie das:

//Immediately Invoked Function Expression that gets called immediately 
    (function() { 
     //Make the initial call to your setTimeout function 
     repeat(); 
     //Function will constantly be called 
     function repeat() { 
      setTimeout(function() { 
       //(Put your conditional logic here) 
       console.log('test'); 
       repeat(); 
      }, 2000); 
     } 
    })();