Question

我一直遇到一些问题，我为纯粹的javascript-css tuorial编写了一些代码。我是javascript的新手，我写了这段代码来练习，但我认为这对我正在为客户做的一些工作来说是完美的。要更改幻灯片，我有五个函数，第一个是启动onload，然后我使用settimeout执行下一个，然后是下一个，下一个直到5，当它循环回到一个，然后进入无限循环，直到用户按下暂停（cleartimeout）。我的问题是，如何在保持当前幻灯片（功能）的同时重新启动settimeout循环？注意：我现在真的想坚持使用javascript，所以我宁愿没有jquery解决方案。

如果您想观看幻灯片的展示：http://fudgepants.com/beta/slideshow/ 您可以按F12查看源代码。

Answer 1

您可以创建一个单独的函数来控制要调用的函数。我们称之为showNextSlide（）。

这个函数有一个从1到5循环的绑定变量。它自己调用setTimeout（）并恢复你只需再次调用该函数，因为它仍然知道它停止的位置。

// keep a reference to the most recent setTimeout() call
var timeOutId;

function showNextSlide()
{
    // initialize the bound variable for the first time
    // this variable gets preserved upon subsequent calls
    this.idx = this.idx || 0;

    switch (this.idx) {
        case 0:
            // code to show slide 1
            break;
        case 1:
            // show slide 2
            break;
        // etc.
    }

    // increase the counter and make sure it doesn't go over 4
    // i.e. 0, 1, 2, 3, 4, 0, 1, 2, 3, 4
    this.idx = (this.idx + 1) % 5;

    // call me in 5 seconds
    timeOutId = setTimeout(showNextSlide, 5000);
}

清除后如何重新启动settimeout循环javascript？

1 个答案: