1

我尝试通过更改 img 标签的 src 来一张一张地随机显示不同的图像。

<img src="dravid-young.jpg" width="350" height="460">
<script type="text/javascript">

var a= new Array ("dravid-childhood.jpg", "dravid-young.jpg", "Jellyfish.jpg", "Tulips.jpg" , "Lighthouse.jpg" , "Penguins.jpg");

$(document).ready(function(){
    var rand = a[Math.floor(Math.random()*a.length)];
    changeimage(a[Math.floor(Math.random()*a.length)]);
});


function changeimage(imag)
{
    $("img").attr("src",imag);
    setTimeout(changeimage(a[Math.floor(Math.random()*a.length)]), 5000);
}

</script>

但它看起来像创建了一个无限循环，页面继续加载！

4

3 回答 3

8

传递一个调用你的函数而不是直接调用你的函数的函数。

setTimeout(function() {
    changeimage(a[Math.floor(Math.random()*a.length)]);
}, 5000);

您正在立即调用changeimage，它会立即递归而不是等待。

通过传递一个调用 的函数，它会在调用它之前changeimage等待。5000ms

需要明确的是，我只是替换了上面的错误代码。其余的应该留在原地。这是最后一个例子。

function changeimage(imag) {
    $("img").attr("src",imag);

    setTimeout(function() {
        changeimage(a[Math.floor(Math.random()*a.length)]);
    }, 5000);
}
于 2013-10-14T16:00:00.257 回答
2

当你从同一个函数中调用一个函数时，它会创建一个循环，如果你不停止它，它就是一个无限循环。

于 2013-10-14T15:58:58.250 回答
2

问题是您在每个 changeimage 调用中都调用了 changeimage ，因此您将面临一个循环。

但是您每个间隔都在执行一个函数，因此您可以使用setInterval

https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval

喜欢：

var a = new Array("http://placehold.it/200x200", "http://placehold.it/500x500", "http://placehold.it/300x300", "http://placehold.it/400x400", "http://placehold.it/300x300", "http://placehold.it/200x200");

var intervalID = window.setInterval(changeimage, 1000);

function changeimage() {    
    $("img").prop("src", a[Math.floor(Math.random() * a.length)]);    
    console.log($("img").prop("src"))
}

演示：http: //jsfiddle.net/IrvinDominin/Xggb5/2/

于 2013-10-14T16:08:42.927 回答