如何通过Ajax同步无限调用div重新加载

Question

我是 javascript 的新手，说真的，这个异步的东西快把我逼疯了。

我正在开发一个显示 div（占据整个屏幕）的项目，该 div 每次都会重新加载不同的内容并在屏幕上停留 X 时间。

例如，我已经在这样的数组中创建了一些静态屏幕对象：

screenArray[0] = {ID:"987234", Name:"SampleScreen", Time:6000};
screenArray[1] = {ID:"837625", Name:"SampleScreen2", Time:10000};   

所以如果 javascript 同步工作，这就是我想要做的：

function ScreenEngine(){
    reloadScreenContent();// "loads" the first screen (this is just an Ajax div reload function)
    for (var i = 0; i == screenArray.length+1; i++){
        if (i == screenArray.length){ //when it gets to the latest screen, it goes to the first one
            i = 0;
        }
        setTimeout(reloadScreenContent, screenArray[i].Time); // loads the second screen with the timeout of the first one (i=0)
    }
}

（我只是在做一些时间性的事情，稍后我会处理内容。）

看到了一些关于回调函数的其他帖子，因此 javascript 可以“同步”地处理我想要的东西，我什至尝试了其中的一些，但失败了。

即使不详细了解我将如何制作回调函数，我也明白（至少我“尝试”的方式）它会永远堆叠，因为我要求 javascript 做一个无限的工作。

我需要集思广益如何解决这个问题，也许是一些使用回调或类似示例代码的提示，以便我可以指导自己。

Answer 1

我认为您需要做的是在回调函数本身内部调用 reload 函数。 如果您将 jQuery 用于 ajax 函数，代码可能如下所示：

function loadContent(){
    $.getJSON("yourURL", callback)
}

function callback(data){
    /*do something with the data*/
    /*call loadContent at an interval */
    window.setTimeout(loadContent, 2000 );
}

loadContent(); 

这是 loadContent 将在内容加载后 2 秒被调用。这是一个递归 ajax 调用的示例，您可以在控制台中看到它每 10 秒调用一次 ajax http://jsfiddle.net/w66peL7b/1/