Comment retarder l'exécution de ce code en JavaScript ?

Question

J'ai écrit ce code pour changer une image :

change = function(){
    for (r=0; r<6; r++){
        for (i = 0; i < 6 ; i++) { 
            setInterval(imgfile(number=i+1), 5000);
        }
    }
}

imgfile= function(number){
    a = 'document.getElementById("imgdiv").src = "images/'+number+'.svg"';
    eval(a);
}

La fonction change() est appelée lorsqu'un bouton est cliqué. Lorsque j'appuie sur le bouton, l'image passe directement à 6.svg, alors que je veux qu'elle passe par les images 1, 2, 3, 4, 5, 6 et qu'elle soit répétée 6 fois. Lorsque je change setInterval à change.setInterval o imgfile.setInterval il ne fonctionne pas du tout. Comment puis-je résoudre ce problème ?

Answer 1

change = function(i=0){
        imgfile(i%6+1);//change image
         if(i<36) setTimeout(change,5000,i+1);//next image in 5 seconds
}

imgfile= function(number){
    document.getElementById("imgdiv").src = "images/"+number+".svg";//no need to use ev(i||a)l
}

Au lieu d'un désordre de type boucle/intervalle, vous pouvez simplement lancer un timeout qui redémarre tout seul après avoir changé l'image... Ce code bouclera sur 6 images avec un délai de 5 secondes et cela 6 fois...

Answer 2

Quelque chose comme ça, peut-être ?

var index, imgCount, loopCount, imgTag, countdown;

index = 0;
imgCount = 6;
loopCount = 6;
imgTag = document.getElementById('imgdiv');

countdown = function () {
  if (index < imgCount * loopCount) {
    imgTag.src = 'images/' + index % imgCount + '.svg';
    index = index + 1;
    setTimeout(countdown, 5000);
  }
};

countdown();

Ici, nous évitons la double boucle et utilisons des calculs modulaires (index % imgCount) pour obtenir le bon numéro de fichier.

Answer 3

Pour une autre question, j'ai écrit une belle fonction utilitaire qui a un grand nombre d'utilisations, mais qui peut aussi gérer ce scénario très facilement. Le problème principal est qu'il n'y a pas de temps qui s'écoule entre les différents délais. Ainsi, vous réglez 6 actions différentes pour qu'elles se produisent toutes dans les 5000 ms, et elles se produiront toutes au même moment.

Voici mon réponse originale

Voici la fonction d'utilité de cette réponse, ainsi que son application à votre problème.

function doHeavyTask(params) {
  var totalMillisAllotted = params.totalMillisAllotted;
  var totalTasks = params.totalTasks;
  var tasksPerTick = params.tasksPerTick;
  var tasksCompleted = 0;
  var totalTicks = Math.ceil(totalTasks / tasksPerTick);
  var initialDelay = params.initialDelay;
  var interval = null;

  if (totalTicks === 0) return;

  var doTick = function() {
    var totalByEndOfTick = Math.min(tasksCompleted + tasksPerTick, totalTasks);

    do {
      params.task(tasksCompleted++);
    } while(tasksCompleted < totalByEndOfTick);

    if (tasksCompleted >= totalTasks) clearInterval(interval);
  };

  // Tick once immediately, and then as many times as needed using setInterval
  if (!initialDelay) doTick();
  if (tasksCompleted < totalTicks) interval = setInterval(doTick, totalMillisAllotted / totalTicks);
}

// Do 6 actions over the course of 5000 x 6 milliseconds
doHeavyTask({
  totalMillisAllotted: 5000 * 6,
  totalTasks: 6,
  tasksPerTick: 1,
  initialDelay: false, // Controls if the 1st tick should occur immediately
  task: function(n) { console.log('Set image to "images/' + (n + 1) + '.svg"'); }
});

Answer 4

Vous voulez faire setTimeout() .

setTimeout attend la valeur en millesecondes, puis exécute le code. Où setInterval exécute le code toutes les quelques millesecondes.

Oui, ne le faites pas change.setInterval ou autre, c'est juste setInterval .

Un exemple pour vous serait ceci à l'intérieur de la boucle for pour remplacer la ligne de commande setInterval fonction.

setTimeout(imgfile(i+1), 5000);