Question

也许我没有正确理解setInterval，但我制作了一种幻灯片脚本，如下所示：

var i = 0;

setInterval(function() {
    $('.slide').fadeOut('slow').delay(200);
    $('.slide:eq(' + i + ')').fadeIn('slow').delay(2000);
    i++;
    if(i == 5){
        i = 0;
    }

}, 4000);

除了第一次运行之外，这是有效的 - 前4秒没有显示幻灯片。

请参阅此处的小提琴：http://jsfiddle.net/vpa89snf/6/

无论如何我可以在第一次运行时触发setInterval函数内的什么内容？

Answer 1

使用setTimeOut代替setInterval以获得更好的效果，请查看以下示例：

Here is working jsFiddle.

var i = -1;
var totalSlide = $('.slide').length-1;
var slideTimer = 0;
function nextFrame() {
    i == totalSlide ? i = -1 : i;
    i++;
    $('.slide').fadeOut(200);
    $('.slide').eq(i).fadeIn(200);
    slideTimer = setTimeout(nextFrame,4000);
}

$('#holder').addClass('isAni');
nextFrame();

// play / pause animation
$('#holder').click(function() {
    if ( $(this).hasClass('isAni') ) {
        $(this).removeClass('isAni');
        clearTimeout(slideTimer);
    }else{
        $(this).addClass('isAni');
        nextFrame();
    }
});

Answer 2

您需要运行该功能而不是等待4秒：

var i = 0;

function doSomething() {
    $('.slide').fadeOut('slow').delay(200);
    $('.slide:eq(' + i + ')').fadeIn('slow').delay(2000);
    i = (i + 1) % 5;
}

$document.ready(function () {
    setInterval(doSomething, 4000);
    doSomething(); // run it!
});

JSFIDDLE.

Answer 3

这就是setInterval的执行方式。它在x毫秒设置为第二个参数后运行您的函数。为了显示第一张幻灯片，您需要做的就是让第一张幻灯片像下面一样：

var i = 0;

$('.slide:eq(' + i + ')').fadeIn('slow').delay(2000);
i++;

setInterval(function() {

...

}, 4000);

setInterval在首次运行时不会触发内部脚本

3 个答案: