在for循环中使用setTimeout - 不起作用

Question

我在for循环中有一个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
   }); 
}

查看行动中的代码

＆＃13;

＆＃13;

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

oneBanner();

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

  

注意：使用setTimeout()，您将显示每张图片5秒钟，代码将停止循环播放

更新 直至OP评论

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

一个字：关闭

＆＃13;

＆＃13;

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)=>{
	var url = $img.html();
	  $img.html('');

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您正在引用setTimeout中的错误变量。替换＆＃39; y＆＃39;与＆＃39; k＆＃39;

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;