setTimeout vs setInterval en javascript

Utilisez une fonction pour contenir setTimeout et appelez-la dans la fonction

 $(function() { var current = $('#counter').text(); var endvalue = 50; function timeoutVersion() { if (current === endvalue) {return false;} else { current++; $('#counter').text(current); } setTimeout(timeoutVersion, 50); } $('a').click(function() { timeoutVersion(); }) })​ 

Démo en direct | La source

Cependant, il vaut mieux effacer setInterval avec clearInterval fois que vous avez terminé:

 $(function() { var current = $('#counter').text(); var endvalue = 50 $('a').click(function() { var storedInterval = setInterval(function() { if (current === endvalue) { clearInterval(storedInterval); } else { current++; $('#counter').text(current) } }, 50) }) })​ 

Démo en direct | La source

Pour répondre à votre question – oui, vous pouvez modifier setInterval avec setTimeout setInterval des modifications mineures au code que vous avez utilisé pour setInterval

Lorsque vous utilisez setInterval() pour exécuter une fonction, disons, toutes les 1000 millisecondes, ce qui correspond à 1 seconde, la fonction est déclenchée toutes les 1000 millisecondes, quel que soit le temps d’exécution de la fonction, alors que si vous tentez de faire la même chose setTimeout() , si la fonction prenait, par exemple, 500 millisecondes à exécuter, votre intervalle total de temps entre l’exécution des fonctions sera de 1500 millisecondes.

Oui, vous pouvez appeler la même fonction de manière récursive à l’aide de setTimeout pour obtenir l’effet de setInterval. Notez que dans setTimeout, vous devez vérifier manuellement d’arrêter la boucle si vous l’utilisez de manière récursive. Mais la fonction setInterval renvoie un identifiant avec lequel vous pouvez appeler la fonction clearInterval pour l’arrêter à tout moment.

Je recommande toujours setTimeout à setInterval pour des raisons mieux expliquées par bobince Bien que ma réponse soit proche de celle de l’extramaster, je ne préconise pas l’utilisation d’intervalle uniquement pour avoir la possibilité de l’effacer. Une approche plus simple consiste simplement à ne pas appeler le prochain timeout une fois que vous avez atteint votre objective.

Démo en direct

  $(function() { var current = $('#counter').text(); var endvalue = 50; function increment() { if (current !== endvalue) { current++; $('#counter').text(current) setTimeout(increment, 50); } } $('a').click(function() { increment(); }) })​;