Javascript setTimeout / setInterval

Question

尝试为测试网页制作一个小幻灯片。我很困惑为什么这个代码不起作用（我对javascript不是很有经验，我主要处理Java，Javascript相当令人沮丧）。另外我想添加它确实开始运行它会在几秒后切换到第3张图片然后停止再也不会切换。

var backgroundElement = document.getElementById("innerContent");
var minibarImage1 = document.getElementById("pic1");
var minibarImage2 = document.getElementById("pic2");
var minibarImage3 = document.getElementById("pic3");


minibarImage1.onmouseover = function(){
    backgroundElement.style.backgroundImage="url('images/frontpage/maintenance_01.jpg')";
};

minibarImage2.onmouseover = function() {
    backgroundElement.style.backgroundImage ="url('images/frontpage/natural_steps_01.jpg')";
};

minibarImage3.onmouseover = function() {
    backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')";
};

function slideshow() {
setTimeout(function(){backgroundElement.style.backgroundImage= "url('images/frontpage/maintenance_01.jpg')";}, 2000);
setTimeout(function(){backgroundElement.style.backgroundImage = "url('images/frontpage/natural_steps_01.jpg')";}, 2000);
setTimeout(function(){backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')";}, 2000);
}   


 window.onload = setInterval(function(){slideshow();}, 8000);

Answer 1

正如我已经指出的那样：

window.onload = setInterval(function(){slideshow();}, 8000);

应该是这样的：

window.onload = function(){
    setInterval(function(){slideshow();}, 8000);
}

window.onload存储一个函数。 setInterval返回间隔的ID - 这样您就可以选择停止它。

此外，setTimeout不会暂停程序的执行。因此，您对setTimeout的连续呼叫都会在同一时间执行 - 呼叫slideshow后两秒钟。

您可以尝试嵌套回调函数，如下所示：

function slideshow (){

    setTimeout(function(){
        backgroundElement.style.backgroundImage= "url('images/frontpage/maintenance_01.jpg')";
        setTimeout(function(){
            backgroundElement.style.backgroundImage = "url('images/frontpage/natural_steps_01.jpg')";
            setTimeout(function(){
                backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')";
                slideshow();
            },  2000);
        },  2000);
    },  2000);
}

slideshow();

这可能是一种更优雅的方式，但你明白了。

修改

这可能更优雅：

function slideshow() {
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 2000);
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 4000);
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 6000);
    setTimeout (slideshow, 8000);
}   

将秒数移动2.您甚至可以通过添加网址和时间步长参数来使幻灯片功能更加模块化，以便您可以在一组上复制setTimeout个函数网址。

像这样（伪代码）

function slideshow (urls, timestep){
    var i = 0;
    for (; urls[i]; i++)
        setTimeout (function(){ backgro... = urls[i];}, timestep * i);

    setTimeout (slideshow, timestep * i);
}

slideshow (["url1", "url2", "url3"], 2000);

Answer 2

关于你只看到第三张幻灯片：

在简单地安排其他代码运行后，对setTimeout的调用立即返回。

所以在你的slideshow函数中，你

1. 安排第一张幻灯片在2秒内显示
2. 然后立即安排第二张幻灯片在2秒内显示
3. 然后立即安排第三张幻灯片在2秒内显示

第二张幻灯片在第一张幻灯片之后显示纳秒，然后在第二张幻灯片之后仅显示纳秒。你只能看到出现的第三张幻灯片！

修改

以下是可用于幻灯片放映的一般方法。 （注意，有几个库可以为你做这个，但这实际上是学习JavaScript的一个非常好的练习。）

首先，使用计数器将幻灯片放映到循环图像。在专业的JavaScript中，您将计数器包装在闭包中，以免污染全局命名空间：

var slideshow = (function () {
    var images = [
        'images/frontpage/maintenance_01.jpg',
        'images/frontpage/natural_steps_01.jpg',
        'images/frontpage/twnshp_bdg_01b.jpg'
    ];
    var index = 0;
    return function () {
        backgroundElement.style.backgroundImage= "url(" + images[index] + ")";
        index = (index + 1) % images.length;
        setTimeout(slideshow, 2000);
    }
}());

现在，您甚至不需要等待8秒钟即可开始。你可以逃脱这个：

window.onload = slideshow;

注意这里有 no parens，因为您不想将调用slideshow的结果分配给onload，您希望onload函数是 slideshow。