Exécuter une fonction pendant une durée déterminée

J’essaie de simuler une roue de roulette, en affichant des nombres aléatoires et une couleur d’arrière-plan (noire ou rouge) toutes les dix secondes. Le code ci-dessous fonctionne comme vous le souhaitez, mais je souhaiterais que la fonction ne s’exécute que pendant un laps de temps déterminé, par exemple 5 secondes. Je pense que je dois utiliser setTimeout (), mais je ne peux pas le faire fonctionner avec le code ci-dessous.

$('#spin').click(function(){ function spinWheel() { var rouletteNum = Math.floor((Math.random() * 36) + 1); $('#rouletteWheel').html(rouletteNum); var color = ['red', 'black'] var i = [Math.floor(Math.random()*color.length)]; $('#rouletteWheel').css('background-color', color[i]); } setInterval(spinWheel, 100); });

Une solution simple consiste à utiliser un compteur

 $('#spin').click(function () { var counter = 0, loopCount = 50 //10 times in a second * 5 seconds ; function spinWheel() { if (++counter >= loopCount) { clearInterval(interval); } var rouletteNum = Math.floor((Math.random() * 36) + 1); $('#rouletteWheel').html(rouletteNum); var color = ['red', 'black'] var i = [Math.floor(Math.random() * color.length)]; $('#rouletteWheel').css('background-color', color[i]); } var interval = setInterval(spinWheel, 100); });

Pour ce faire, nous pouvons utiliser l’object Date . Ce qui donne le nombre de millisecondes depuis environ 1970. Nous avons donc défini une heure de début avec Date.now() et l’appelons start puis 5 secondes plus tard serait: end = start + 5000 . Ensuite, nous mettrons à jour le start chaque fois que nous appellerons notre fonction, une fois le start passé, nous devrons mettre fin à notre intervalle avec clear interval .

 var start = Date.now(); // The current date (in miliseconds) var end = start + 5000; // 5 seconds afterwords function spinWheel() { start = Date.now(); // Get the date currently /* Your code here */ if(start > end) clearInterval(timer); // If we are 5 seconds later clear interval } var timer = setInterval(spinWheel, 100);

Exemple de violon – Notez qu’il s’arrête après 5 secondes

Remarque: Vous pouvez également utiliser un compteur, mais si vous voulez que votre temps soit juste après 5 secondes et qu’il soit précis, ce n’est pas recommandé, car il est possible que setInterval() dérive. Mais ce sera assez proche la plupart du temps. La date sera plus précise. Si vous recherchez juste “très près de ou à 5 secondes”, faire un compteur fonctionnera bien.

Hey, vous pouvez effacer votre intervalle après par exemple 10 fois.

  $('#spin').click(function(){ counter = 0; howManyTimes = 10; var interval = setInterval(function () { counter++ if(counter === howManyTimes) { clearInterval(interval); alert('game over'); } else { var rouletteNum = Math.floor((Math.random() * 36) + 1); $('#rouletteWheel').html(rouletteNum); var color = ['red', 'black'] var i = [Math.floor(Math.random()*color.length)]; $('#rouletteWheel').css('background-color', color[i]); } },100); interval(); });

exemple de travail jsfiddle intervalle clair