Javascript 使用jQuery设置不同事件的间隔

我已经创建了自己的滑块。每张幻灯片在不同的元素上都有不同的动画，所以我有类似这样的按钮，可以从一张幻灯片切换到另一张幻灯片

$('.content1').click(function(e){
    $('#image1').animate({'margin-left': '0px', 'margin-top': '0px'});
    $('#box1').animate({'margin-top': '0px'});
    hide2();  //hiddeing slide2
    hide3();  //hidding slide3
    e.preventDefault();
});

$('.content2').click(function(e){
    hide1(); //hidding slide1
    hide3();  //hidding slide2
    $('#box2').animate({'margin-top': '0px'});
    $('#image2').animate({'margin-top': '0px'});
    e.preventDefault();
}); 


$('.content3').click(function(e){
    hide1();
    hide2();
    $('#box3').animate({'margin-left': '0px'});
    $('#image3').stop().delay(1000).show().animate({'opacity': '1'});
    e.preventDefault();
});

现在我想为滑块添加一个间隔，使其每X秒单独移动一次

我想知道是否可以进行3个不同的调用，而不是我习惯的一个函数：

setInterval(function(){
     nameOfFunction();
    }, 6*1000);

---

谢谢。

最后，我按照@BradM的建议，使用

setTimeout

解决了这个问题

我相信有一个更简单的方法，但我是这样做的。 代码如下：

菜单单击事件： 幻灯片效果 隐藏函数 Onmouse over/out操作 主播放幻灯片功能 第一个电话

---

切勿对动画使用setInterval，因为计时将永远不会同步。相反，请使用setTimeout（function（）{}，1000），并再次使用setTimeout作为动画的回调函数。如果不是回调函数，setTimeout函数中应该包含什么？假设您在初始化时想要的动画与在整个滑块中使用的动画相同，则函数应该相同。如果要取消，请确保也设置一个计时器变量，即var timer=setTimeout（）；那么，我是否应该将当前事件转换为函数，并在每个事件中调用一个函数，然后在setTimeout回调中的下一个幻灯片函数中调用该函数？是的。但是，您有多个动画同时执行。这需要一些逻辑来确定哪个动画回调是您想要的。

$('.content1').click(function(e){
    slide1();
    e.preventDefault();
});

$('.content2').click(function(e){
    slide2();
    e.preventDefault();
}); 

$('.content3').click(function(e){
    slide3();
    e.preventDefault();
});

function slide1(){
    next = 2; //setting which is gonna be the next slide
    $('#image1').animate({'margin-left': '0px', 'margin-top': '0px'});
    $('#box1').animate({'margin-top': '0px'});

    hide2();
    hide3();
}

function slide2(){
    next = 3; //setting which is gonna be the next slide
    hide1();
    hide3();
    $('#box2').animate({'margin-top': '0px'});
    $('#image2').animate({'margin-top': '0px'});
}

function slide3(){
    next = 1; //setting which is gonna be the next slide
    hide1();
    hide2();
    $('#box3').animate({'margin-left': '0px'});
    $('#image3').stop().delay(1000).show().animate({'opacity': '1'});
}

    function hide1(){
    $('#image1').animate({'margin-left': '2000px'});
    $('#box1').animate({'margin-top': '-2000px'});
}

function hide2(){
    $('#box2').animate({'margin-top': '600px'});
    $('#image2').animate({'margin-top': '-2000px'});
}

function hide3(){
    $('#box3').animate({'margin-left': '-2000px'});
    $('#image3').animate({'opacity' : '0', 'display' : 'none'}, function(){
        $(this).hide();
    });
}

//when its over, we stop the movement
var delay = 6000; //6 seconds
$('#slider').hover(function(){
    clearTimeout(timer);

}, function(){
//starting again the animation (since the last slide)   
    timer = window.setTimeout(playSlide, delay);
});

var next = 2;  //next slide will be the 2nd one at the start
function playSlide(){
    var name = "slide" + next;
    var method = eval(name);

    method();

    //calling recursively the function
    timer = window.setTimeout(playSlide, delay);
}

  //only if there's an slider, we initate it
if($('#slider').length){
    //first call the the slider
    timer = window.setTimeout(playSlide, delay);
}