有没有办法一秒接一秒地启动setInterval

Is there any way to start a setInterval one second after another?

本文关键字:一秒 启动 setInterval 有没有      更新时间:2023-09-26

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

所以问题是,所有三个盒子都同时发射:有没有办法让它们同时发射一个又一个?

可以这样做:

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,只需调用希望动画开始的函数即可。

小提琴

您可以使用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/

尝试实现"一个接一个同时"(无论这意味着什么(:

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