Comment différer 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, quand je veux qu'elle passe par les images 1, 2, 3, 4, 5, 6 et qu'elle répète 6 fois. Lorsque je change setInterval en change.setInterval ou imgfile.setInterval cela ne fonctionne pas du tout. Comment puis-je réparer ça?

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 de la boucle/mess intervalle, vous pouvez simplement commencer un délai d'attente qui redémarre après avoir changé l'image ... Ce code boucle de 6 images avec un retard de 5 secondes et que 6 fois.

Answer 2

Vous voulez faire setTimeout().

setTimeout effectue une pause pour la valeur de seconde et effectue ensuite le code. Où setInterval exécute le code toutes les quelques millisecondes. Oui, ne faites pas change.setInterval ou quoi que ce soit, c'est juste setInterval.

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

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

Answer 3

Pour une autre question, j'ai écrit une bonne fonction utilitaire qui a un certain 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 retards. Donc, vous définissez 6 actions différentes pour tout se passer dans les 5000ms, et tout se produira au même moment.

Voici mon original answer

Voici la fonction d'utilité pour 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

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 sommes en évitant la double boucle et en utilisant les mathématiques modulaire (indice% de imgCount) pour obtenir le numéro de dossier à droite.