Verwenden von setTimeout innerhalb einer for-Schleife - funktioniert nicht

Question

Ich habe eine setTimeout innerhalb der a for-Schleife, aber es verhält sich nicht wie ich es erwartet hatte.

Ich habe eine Reihe von Bannern auf einer Seite, die alle auf einmal geladen werden. Ich entferne den Div-HTML-Code ihrer Eltern und speichere ihn in einem Array. Dann möchte ich, dass jeder Elternteil alle 5 Sekunden den entsprechenden HTML-Code erhält. Dies muss nur einmal im Bereitschaftszustand geschehen.

Hier ist mein Code ...

function oneBanner() { 
 

 
    var divs = $('.banner-slide'), 
 
     imgs = []; 
 

 
    for (var j = 0; j < divs.length; j++) { 
 
     imgs.push($('.banner-slide:nth-child(' + (j+1) + ')')); 
 
    } 
 

 
    for (var k = 0; k < imgs.length; k++) { 
 
     var url = $(imgs[k]).html(); 
 
     $(imgs[k]).html(''); 
 

 
     setTimeout(function(y) { 
 
     console.log(k * 5000); 
 
     $(imgs[k]).html(url); 
 
     }, k * 5000, k); 
 
     
 
    } 
 
} 
 
oneBanner();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="banner-slide"> 
 
    <img src="http://www.placecage.com/150/150" > 
 
</div> 
 

 
<div class="banner-slide"> 
 
    <a href="#"> <img src="http://fillmurray.com/150/150" > </a> 
 
</div> 
 

 
<div class="banner-slide"> 
 
    <img src="http://stevensegallery.com/150/150" > 
 
</div>

Wie Sie können die Bilder sehen nicht bekommen, auf dem Bildschirm gedruckt einer nach dem anderen alle 5 Sekunden - was ich dachte, ich tat .

Vielen Dank für jede Hilfe.

Serge

Answer 1

Es wird besser sein, Ihren Code zu vereinfachen, während Sie außerhalb dieser Funktion alle Variablen/Arrays müssen nicht .. Sie können einfach jquery .each()

versuchen diese

function oneBanner() { 
    var divs = $('.banner-slide'); 
    divs.each(function(i){ // loop through .banner-slide divs 
     var ThisIt = $(this); // define this outside setTimout function 
     setTimeout(function(){ 
     divs.hide(); // hide all .banner-slide divs 
     ThisIt.show(); // show just this one 
     } , 5000 * i);  // time * the i -- i is the index of the div 
    }); 
} 

verwenden

sehen Sie den Code in Aktion

function oneBanner() { 
 
    var divs = $('.banner-slide'); 
 
    divs.each(function(i){ 
 
     var ThisIt = $(this); 
 
     setTimeout(function(){ 
 
     divs.hide(); 
 
     ThisIt.show(); 
 
     } , 5000 * i); 
 
    }); 
 
} 
 

 
oneBanner();

.banner-slide:not(:first){ 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="banner-slide"> 
 
    <img src="http://www.placecage.com/150/150" > 
 
</div> 
 

 
<div class="banner-slide"> 
 
    <a href="#"> <img src="http://fillmurray.com/150/150" > </a> 
 
</div> 
 

 
<div class="banner-slide"> 
 
    <img src="http://stevensegallery.com/150/150" > 
 
</div>

Hinweis: von setTimeout() mit Ihnen jedes Bild 5 Sekunden lang zeigen werden und der Code wird Looping

aktualisieren stoppenbis zum OP Kommentar

function oneBanner() { 
 
    var divs = $('.banner-slide'), 
 
     htmlArray = []; 
 
    divs.each(function(i){ 
 
     var ThisIt = $(this);   // get this outside the setTimout 
 
     htmlArray.push(ThisIt.html()); // push the inner html to the array 
 
     ThisIt.html('');     // emty this div 
 
     setTimeout(function(){ 
 
     $(ThisIt).html(htmlArray[i]); // add html again with setTimeout every 5 second to its parent div 
 
     } , 5000 * i); 
 
    }); 
 
} 
 

 
oneBanner();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="banner-slide"> 
 
    <img src="http://www.placecage.com/150/150" > 
 
</div> 
 

 
<div class="banner-slide"> 
 
    <a href="#"> <img src="http://fillmurray.com/150/150" > </a> 
 
</div> 
 

 
<div class="banner-slide"> 
 
    <img src="http://stevensegallery.com/150/150" > 
 
</div>

Answer 2

ein Wort: Schließung

function oneBanner() { 
 

 
    var divs = $('.banner-slide'), 
 
     imgs = []; 
 

 
    for (var j = 0; j < divs.length; j++) { 
 
     imgs.push($('.banner-slide:nth-child(' + (j+1) + ')')); 
 
    } 
 
    
 
    imgs.forEach(($img,k)=>{ 
 
\t var url = $img.html(); 
 
\t $img.html(''); 
 

 
\t setTimeout(function(y) { 
 
\t \t $img.html(url); 
 
\t }, k * 5000, k); 
 
\t }) 
 
\t 
 
} 
 
oneBanner();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="banner-slide"> 
 
    <img src="http://www.placecage.com/150/150" > 
 
</div> 
 

 
<div class="banner-slide"> 
 
    <a href="#"> <img src="http://fillmurray.com/150/150" > </a> 
 
</div> 
 

 
<div class="banner-slide"> 
 
    <img src="http://stevensegallery.com/150/150" > 
 
</div>

Answer 3

Sie sind die falsche Variable in Ihrer SetTimeout verweisen. Ersetzen 'y' mit 'k'

function oneBanner() { 
 

 
    var divs = $('.banner-slide'), 
 
     imgs = []; 
 

 
    for (var j = 0; j < divs.length; j++) { 
 
     imgs.push($('.banner-slide:nth-child(' + (j+1) + ')')); 
 
    } 
 

 
    for (var k = 0; k < imgs.length; k++) { 
 
     var url = $(imgs[k]).html(); 
 
     $(imgs[k]).html(''); 
 
     setTimeout(function(k) { 
 
      console.log(k * 5000); 
 
      $(imgs[k]).html(url); 
 
     }, k * 5000, k); 
 

 
    } 
 
    } 
 
    oneBanner();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
    <div class="banner-slide"> 
 
     <img src="http://www.placecage.com/150/150" > 
 
    </div> 
 

 
    <div class="banner-slide"> 
 
     <a href="#"> <img src="http://fillmurray.com/150/150" > </a> 
 
    </div> 
 

 
    <div class="banner-slide"> 
 
     <img src="http://stevensegallery.com/150/150" > 
 
    </div>