Блог

Главная - Вопросы по программированию - Есть ли какой-нибудь способ запускать setInterval одну секунду за другой?

Есть ли какой-нибудь способ запускать setInterval одну секунду за другой?

#javascript #timer #setinterval

#javascript #таймер #setinterval

Вопрос:

http://jsfiddle.net/9DP2d/

     setInterval(toggleredBox, 1000);
    setInterval(toggleorangeBox, 1000);
    setInterval(toggleyellowBox, 1000);

var toggleredBox = function toggleredBox() {
    $(".redBox").slideToggle(1000);
};

var toggleorangeBox = function toggleorangeBox() {
    $(".orangeBox").slideToggle(1000);
};

var toggleyellowBox = function toggleyellowBox() {
    $(".yellowBox").slideToggle(1000);
};

Итак, проблема в том, что все 3 поля запускаются одновременно: есть ли какой-нибудь способ заставить их запускаться одно за другим одновременно?

Ответ №1:

Можно ли сделать это следующим образом:

 setInterval(toggleredBox, 3000);

var toggleredBox = function toggleredBox() {
    $(".redBox").slideToggle(1000);
    setTimeout(toggleorangeBox, 1000);
};

var toggleorangeBox = function toggleorangeBox() {
    $(".orangeBox").slideToggle(1000);
    setTimeout(toggleyellowBox, 1000);
};

var toggleyellowBox = function toggleyellowBox() {
    $(".yellowBox").slideToggle(1000);
};

Также можно использовать другую setTimeout в последней функции и просто вызвать функцию, с которой вы хотите запустить анимацию.

скрипка

Ответ №2:

Вы можете использовать setTimeout для задержки запуска:

 setInterval(toggleredBox, 1000);
setTimeout(function(){
  setInterval(toggleorangeBox, 1000);
}, 1000):
setTimeout(function(){
  setInterval(toggleyellowBox, 1000);
}, 2000):

Вы также можете использовать один интервал для всех трех и использовать счетчик, чтобы проверить, когда переключать их в первый раз:

 setInterval(toggleBoxes, 1000);

var cnt = 0;

function toggleBoxes() {
  $(".redBox").slideToggle(1000);
  if (cnt > 0) $(".orangeBox").slideToggle(1000);
  if (cnt > 1) $(".yellowBox").slideToggle(1000);
  cnt  ;
};

Демонстрация:http://jsfiddle.net/9DP2d/2 /

Ответ №3:

Попытаться реализовать «одно за другим одновременно» (что бы это ни значило):

 setInterval(toggleredBox, 1000);

var toggleredBox = function() {
    $(".redBox").slideToggle(1000, toggleorangeBox);
};

var toggleorangeBox = function() {
    $(".orangeBox").slideToggle(1000, toggleyellowBox);
};

var toggleyellowBox = function() {
    $(".yellowBox").slideToggle(1000);
};