forループ内でsetTimeoutを使用すると動作しません。

Question

私はforループ内にsetTimeoutを持っていますが、予想通りに動作しません。

私は一度にすべてを読み込んでいるページにバナーの束を持っています。私は親のdiv HTMLを削除して、配列に格納しています。それから私は各親が対応するhtmlを5秒ごとに受け取るようにしたいと思います。これは準備完了状態で一度だけ発生する必要があります。

ここに私のコードだ...

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>

あなたは画像を一度に画面1に印刷されません見ることができるように5秒ごとに - 私は私がやったと思いました。

ありがとうございました。

セルジュ

Answer 1

この関数外の変数/配列のいずれかを必要としないながら、あなたがちょうどこの

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

を試してみてくださいjqueryの .each()

を使用することができます。..あなたのコードを簡素化するほうが良いでしょう

は、アクションのコードを参照してください

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

つの単語：あなたのsetTimeoutメソッドの内部で間違った変数を参照している

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

閉鎖。 '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>