Question

我尝试通过更改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>

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

Answer 1

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

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

Answer 2

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

Answer 3

问题是你在每个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/

setTimeout创建一个无限循环

3 个答案: