在for循環中使用setTimeout - 不工作

Question

我在a循環中有一個setTimeout，但它不像我預期的那樣工作。

我在一次加載所有頁面的頁面上有一串橫幅。我將他們的父母的div html並將其存儲在一個數組中。然後，我想每個父母每5秒收到一次相應的html。這隻需要在就緒狀態下發生一次。

這裏是我的代碼...

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>

正如你所看到的圖像沒有得到在同一時間打印在屏幕上的一個每5秒 - 這是我認爲我做的。

謝謝你的幫助。

塞爾

Answer 1

這將是更好地簡化代碼，而你不需要任何變量/數組的這個功能之外..你可以只使用jquery .each()

嘗試這

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 
    }); 
} 

在行動中看到的代碼

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>

注意：使用setTimeout()你會顯示每5秒圖像和代碼將停止循環

更新到OP評論

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

一個字：關閉

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

您正在引用您的setTimeout裏面的錯誤變量。與 '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>