Question

我（很差）试图创建一个简单的页面，它在时钟+日期，当前天气，7天天气预报，新闻和日历事件之间循环。使用函数调用每个“项目”。

例如;我创建了像：

这样的函数

displayTime();      // Time + date using Moment.js
currentWeather();   // Current weather using Forecast.io        (AJAX call)
forecastWeather();  // Weekly forecast of the weather           (AJAX call)
latestNews();       // Latest headlines from RSS source/s       (AJAX call)
calendarEvents();   // Calendar events from iCloud calendars

当我自己打电话时，它们都能完美地工作;但是在jQuery文件准备好之后我想调用clock + date函数，等待30秒，然后调用下一个函数（这将是当前的天气）。在所有函数都经过循环之后，我希望循环回到时钟并重新开始。

我怎么能这样做？

重新编辑：根据Chop的建议，我想使用以下内容 - 当时钟按计划每秒更新时，功能不会切换每30秒一次。

jQuery(document).ready(function ($) {      
    function displayOne(){
        displayTime();
        setTimeout(displayTwo, 30000);
    }
    function displayTwo() {
        currentWeather();
        setTimeout(displayOne, 30000);
    }
    displayOne();
    setInterval(displayTime, 1000);
});

Answer 1

你可以像这样链接它们

function callFx(fx) {
    setTimeout(fx, 30000)
}

function function1() { // update weather
    callFx(function2)
}
function function2() { // update time
    callFx(function3)
}
function function3() { // some operation
    callFx(function1)
}

或使用setInterval

var functions = [function1, function2, function3]
var index = 0

setInterval(function() {
    functions[index]()
    if(!functions[++index]) index = 0
}, 30000)

完整的代码将是

jQuery(document).ready(function ($) {      
    function displayOne(){
        setTimeout(displayTwo, 30000)
    }
    function displayTwo() {
        currentWeather()
        setTimeout(displayOne, 30000)
    }
    displayOne()
    setInterval(updateTime, 1000)
})

Answer 2

您可以使用setInterval()触发调用另一个功能，该功能负责根据您的小部件的当前状态调用您正确的一个功能来更改您的小部件内容。

JavaScript循环每30秒调用一次不同的函数

2 个答案: