在Javascript JQuery中加载Ajax内容后循环和暂停

Question

我有一个我想解决的简单问题（从来没有！），我试图遍历我制作的javascript数组中的URL列表，加载第一个，等待X秒，然后加载第二个，然后继续，直到我再次开始。 我得到了数组和循环的支持，麻烦的是，但是我尝试使用setInterval或类似方法实现“等待”，由于循环在后台继续，所以我遇到了结构性问题。

我知道setTimeOut和setInterval，但是还无法以一种有效的方式格式化代码。 我是javascript的新手，因此经常会犯各种愚蠢的错误，并且非常感谢能够了解如何最好地构造它以及一些可行的示例！

我试图这样编码：

$(document).ready(function(){ 

// my array of URL's
var urlArray = new Array();
urlArray[0] = "urlOne";
urlArray[1] = "urlTwo";
urlArray[2] = "urlThree";

// my looping logic that continues to execute (problem starts here)

while (true) {

   for (var i = 0; i < urlArray.length; i++) {

     $('#load').load(urlArray[i], function(){

     // now ideally I want it to wait here for X seconds after loading that URL and then start the loop again, but javascript doesn't seem to work this way, and I'm not sure how to structure it to get the same effect

       });

   }

}

});

Answer 1

您应该使用setTimeout()或setInterval()而不是while循环，并在达到计数器限制时手动中断。

var count = 0;

   // Function called by setInterval
function loadIt() {
    $('#load').load(urlArray[count], function(){
           // Do your thing
      }); 

      count++;  // Increment count

      if(count == urlArray.length) {  
          count = 0;
      }
}

loadIt();    // Call the function right away to get it going

var interval = setInterval(loadIt, 5000);  // then call it every five seconds

编辑：

编辑以使计数器维护脱离load()回调。

编辑：

每次设置count更漂亮的方法是这样的：

count = (count == urlArray.length) ? 0 : count + 1;

Answer 2

我将使用一个递归解决方案，该方案传递源数组和要加载的元素的当前索引，以确保该索引在数组范围内并且没有计划不必要的工作。

function loadUrls( source, index )
{
     if (index < source.length) { // make sure this one is available
         $('#load').load( source[index], function() {
             var newIndex = index + 1;
             if (newIndex < source.length) { // don't schedule if this is last
                 setTimeout( function() { loadUrls( source, newIndex ); }, 5000 );
             }
         });
     }
} 

$(document).ready(function(){  

    // my array of URL's 
    var urlArray = new Array(); 
    urlArray[0] = "urlOne"; 
    urlArray[1] = "urlTwo"; 
    urlArray[2] = "urlThree";

    loadUrls( urlArray, 0 );
}

如果希望它无限递归相同的URL，请将loadUrls更改为：

function loadUrls( source, index )
{
     if (index < source.length) { // make sure this one is available
         $('#load').load( source[index], function() {
             var newIndex = (index + 1) % source.length;
             setTimeout( function() { loadUrls( source, newIndex ); }, 5000 );
         });
     }
}

Answer 3

尝试这样的事情。

var totalUrls = urlArray.length;
var currentPosition = 0;

function keepLoadingForever() {
  if (currentPosition >= totalUrls) currentPosition = 0;

   $('#load').load(urlArray[currentPosition], function(){
       setTimeout(keepLoadingForever, 5000);            //delay 5 seconds
       });
   }

  currentPosition++;
}