Warum wird diese Schleife nicht?

Question

Ich habe ein Javascript-Programm geschrieben, das das Bild in einer Kopfzeile ändert, wartet und zeigt dann die nächste.

Ich habe versucht, es rückgängig zu 1 zu machen, wenn es das letzte Bild erreicht, aber es funktioniert nicht, der Computer stürzt ab und ich bin wirklich fest.

Später wird es Optionen zu verblassen und verschiedene Übergänge haben, aber im Moment kann ich nicht die Funktion für immer Schleife ohne Absturz des Computers bekommen.

Kann jemand eine Lösung anbieten?

Danke,

Andrew

var $initialDelay = 0; 
var $delay = 200; 
var $picture = 1; 
var $pictureAmount = 4; 

function myFunction() { 
    //first picture loaded in CSS 
    //loop through pictures 
    for (i=0;i<$pictureAmount;i++) { 
     setTimeout(function(){ 
      document.getElementById("header").style.backgroundImage = "url(img/slideshow/slideshow"+$picture+".jpg)"; 
      $picture++; 
     }, $initialDelay); 
     $initialDelay += $delay; 
    } 
} 
myFunction(); 

Answer 1

Hier ist ein Beispiel über ein 4-Bilder mit einem Timeout für Looping. Ich denke, Sie sollten in der Lage sein, dies in Ihrem Code zu verwenden, um zu tun, was Sie wollen.

const 
 
    delayBetweenPictures = 1000, 
 
    numberOfPictures = 4, 
 
    initialPicture = 1, 
 
    image = document.getElementById('slideshow'); 
 
    
 
    
 
function changeToPicture(pictureIndex) { 
 
    console.log(`Changing picture to index ${pictureIndex}`); 
 
    // Change the image 
 
    image.src = `http://lorempixel.com/320/200/cats/${pictureIndex}`; 
 
    
 
    // Use a modulo operator to turn 4 (number of pictures) back to 0 and add 1 so the range becomes 1...number of pictures. 
 
    pictureIndex = (pictureIndex % numberOfPictures) + 1; 
 
    
 
    // Set a timeout of X ms after which the changeToPicture method is called again, this time with the new value of pictureIndex. 
 
    setTimeout((newIndex) => changeToPicture(newIndex), delayBetweenPictures, [pictureIndex]); 
 
} 
 

 
changeToPicture(initialPicture);

<img id="slideshow">

Answer 2

Wenn Sie das Bild kontinuierlich ändern jeder Sie Schleife 1 bis 4 über zwischen den Werten kann 200ms

var delay = 200; 
var picture = 1; 
var pictureAmount = 4; 

function myFunction() { 
    setTimeout(function() { 
     document.getElementById("header").style.backgroundImage = "url(img/slideshow/slideshow" + picture + ".jpg)"; 
     picture = (picture % pictureAmount) + 1; 
     myFunction(); 
    }, delay); 
} 
myFunction(); 

Answer 3

Durch die Verwendung der Modulo-Operation wollen und immer wieder.

Es wäre einfacher, wenn Sie Ihre Bilder "0-indiziert" sind:

for (i=0; /* infinite loop */; i=(i+1)%$pictureAmount) { 
    // loops through 0, 1, ..., $pictureAmount - 1 
} 

kann aber für eine 1-indizierte Iteration eingestellt werden:

for (i=1; /* infinite loop */; i=(i%$pictureAmount)+1) { 
    // loops through 1, 2, ..., $pictureAmount 
} 

Beispiel Iteration über 1 bis 9:

function sleep(ms) { 
 
    return new Promise(resolve => setTimeout(resolve, ms)); 
 
} 
 

 
async function loop() { 
 
    for (i=1; /* infinite loop */; i=(i%9)+1) { 
 
    document.getElementById("view").innerHTML=i; 
 
    await sleep(1000); 
 
    } 
 
} 
 

 
loop();

<p id="view"></p>