JavaScript-цикл для вызова другой функции каждые 30 секунд

Я (плохо) пытаюсь создать простую страницу, которая перемещается между часами + датой, текущей погодой, прогнозом погоды на 7 дней, новостями и событиями календаря. Каждый из этих «пунктов» призван использовать функции.JavaScript-цикл для вызова другой функции каждые 30 секунд

Например, Я создал такие функции, как:

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 секунд, а затем вызвать следующую функцию (которая будет текущей погодой). После того, как все функции прошли через цикл, я хотел бы, чтобы цикл возвращался к часам и начинался снова и снова.

Как бы я мог это сделать?

Re-edit: После предложения Chop я хотел бы использовать что-то в следующих строках: в то время как часы обновляются каждую секунду, как и планировалось, функции не переключаются каждые 30 секунд.

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

источник

2014-12-14 Damian Worsdell

Вы можете использовать 'setTimeout', где вы хотите использовать 'setInterval' и' setInterval', где вы хотите использовать 's etTimeout'. Кроме того, нет необходимости обертывать такие функции. Просто используйте 'setInterval (updateTime, 1000)'. – Witiko

И, возможно, более важно - не определять и не выполнять функцию displayOne одновременно. Если вы сделаете это так, имя 'displayOne' будет видимо только изнутри функции displayOne, а не извне (вы получите' ReferenceError: displayOne не определено'). Определите 'displayOne', а затем вызовите его. То же самое с 'displayTwo'. – Witiko

Witiko, как я могу определить определенные функции перед их вызовом? Не могли бы вы привести мне пример, пожалуйста? –

Вы можете приковать их, как это

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

источник

2014-12-14 13:43:11 Chop

Или 'index = (index + 1)% functions.length', если вам нравится модульная арифметика. – Witiko

setInterval - отличная идея; но проблема, с которой я столкнулась, - 'displayTime();' использует setTimeout для обновления времени каждую секунду. Могу ли я работать как setInterval, так и setTimeout, я просто использую функцию displayTime(); 'как:' setTimeout (function() {displayTime();}, 1000); ' –

Да, вы можете комбинировать setTimeout и setInterval без проблем, поскольку каждый таймер работает под отдельным идентификатором. Вы можете найти дополнительную информацию о таймерах здесь http://javascript.info/tutorial/settimeout-setinterval – Chop

Вы можете использовать setInterval(), чтобы вызвать вызов другой функции, которая заботится о смене содержимого виджета, вызвав правой один из ваших функций в зависимости от текущего состояния вашего виджета.

источник

2014-12-14 13:42:33 dnlbschff

JavaScript-цикл для вызова другой функции каждые 30 секунд

ответ

Смежные вопросы