setInterval à nouveau 5 secondes après le bouton clearInterval

Question

Je crée un curseur de contenu qui fait défiler automatiquement les diapositives (en appelant périodiquement la fonction "suivant" en utilisant setInterval) mais s'arrête lorsque l'utilisateur clique sur un bouton précédent/suivant (en utilisant clearInterval sur les boutons précédent/suivant).Existe-t-il un moyen d'utiliser setInterval à nouveau après quelques secondes après avoir cliqué sur le bouton ?

Code:

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

Mettre votre setInterval dans une fonction, puis appelez cette fonction avec setTimeout().

La différence entre setInterval() et setTimeout() est-ce setInterval() appelle votre fonction à plusieurs reprises à chaque intervalle, tandis que setTimeout() appelle votre fonction une seule fois après le délai spécifié.

Dans le code ci-dessous j'ai ajouté une fonction startCycle().Appelez cette fonction pour démarrer le cycle, à la fois immédiatement afin qu'il démarre automatiquement et à partir d'un délai d'attente défini dans votre système existant. stopCycle() fonction.

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
}