如何在幻灯片中循环播放进度条的功能？

Question

我有一个幻灯片，以5000的间隔更改图片。

显示一个图像与另一个图像之间的进度条的功能如下：

function timebar(){
    $('#timebar').stop().css({width:0});
    $('#timebar').animate({width:'100%'},5000);
}

我在幻灯片加载后调用它，以便它们同时处理。

我想循环这个函数，以便为每张幻灯片重置时间栏：

function timebar(){
    $('#timebar').stop().css({width:0});
    $('#timebar').animate({width:'100%'},5000);
    setTimeout(timebar(),5000);
}

但是，完成此操作后，我收到错误Maximum call stack size exceeded。

如何让这个函数每隔5000毫秒重复一次？

Answer 1

您需要将函数引用传递给setTimeout，目前您递归调用timebar()函数，而setTimeout根本没用。

您需要使用

setTimeout(timebar,5000);

而不是

setTimeout(timebar(),5000);

Answer 2

您需要将函数引用传递给setTimeout，在您通过调用函数timebar()进行infinte递归调用时。

由于您具有无限递归调用，因此将超出调用堆栈大小。

function timebar(){
    $('#timebar').stop().css({width:0});
    $('#timebar').animate({width:'100%'},5000);
    setTimeout(timebar,5000);
}