Intervall in 5 Sekunden nach clearInterval-Taste erneut einstellen

Question

Ich mache einen Inhaltsschieberegler, der Folien automatisch zyklisch durchläuft (indem ich regelmäßig die Funktion "Weiter" mit aufrufe setInterval) stoppt jedoch, wenn der Benutzer auf eine vorherige / nächste Schaltfläche klickt (mithilfe von clearInterval auf den Tasten Zurück/ weiter).Gibt es eine Möglichkeit zu verwenden setInterval wieder nach ein paar Sekunden nach dem Klicken auf die Schaltfläche?

Codes:

// start to automatically cycle slides
var cycleTimer = setInterval(function () {
   $scroll.trigger('next');
}, 450);

// set next/previous buttons as clearInterval triggers 
var $stopTriggers = $('img.right').add('img.left'); // left right

// function to stop auto-cycle
function stopCycle() {
   clearInterval(cycleTimer); 
}

Answer 1

Setzen Sie Ihre setInterval in einer Funktion und rufe diese Funktion dann mit auf setTimeout().

Der Unterschied zwischen setInterval() und setTimeout() ist das setInterval() ruft Ihre Funktion in jedem Intervall wiederholt auf, während setTimeout() ruft Ihre Funktion nur einmal nach der angegebenen Verzögerung auf.

Im folgenden Code habe ich eine Funktion hinzugefügt startCycle().Rufen Sie diese Funktion auf, um den Zyklus sofort zu starten, damit er automatisch startet, und ab einem in Ihrem vorhandenen Timeout festgelegten Timeout stopCycle() Funktion.

var cycleTimer;

function startCycle() {
   cycleTimer = setInterval(function () {
      $scroll.trigger('next');
   }, 450);
}

// start to automatically cycle slides
startCycle();

// set next/previous buttons as clearInterval triggers 
var $stopTriggers = $('img.right').add('img.left'); // left right

// function to stop auto-cycle
function stopCycle() {
   clearInterval(cycleTimer);
   setTimeout(startCycle, 5000); // restart after 5 seconds
}