javascript - 在 for 循环内使用 setTimeout - 不起作用

Question

我在 for 循环中有一个 setTimeout，但它的行为并不像我预期的那样。

我的页面中有一堆横幅，它们会同时加载。我正在删除他们 parent 的 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>

Note: by using setTimeout() you'll show each image for 5 seconds and the code will stop looping

更新直至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>