JavaScript无限循环延迟播放幻灯片？

一尘不染

JavaScript无限循环延迟播放幻灯片？

javascript

如何在JavaScript中进行无限循环？我正在尝试制作幻灯片，可以正常工作，但是无法循环播放。我什至不能让它循环两次。

我现在正在使用的代码是

window.onload = function start() {
    slide();
}
function slide() {
    var num = 0;
    for (num=0;num<=10;num++) {
        setTimeout("document.getElementById('container').style.marginLeft='-600px'",3000);
        setTimeout("document.getElementById('container').style.marginLeft='-1200px'",6000);
        setTimeout("document.getElementById('container').style.marginLeft='-1800px'",9000);
        setTimeout("document.getElementById('container').style.marginLeft='0px'",12000);
    }
}

没有for的东西在那里，它确实经历了一次。当我输入for时，它要么使Firefox锁定，要么仅循环一次。我确信这是一件非常简单的事情，即使必须循环1,000,000次或进行其他操作（而不是无限循环），这对我来说也很好。

另外，我不想使用jQuery或其他人创建的东西。我正在学习JavaScript，这部分是为了帮助我学习，部分是因为我正在尝试制作尽可能多的基于HTML5的系统。

编辑：我认为它被冻结的原因是因为它一次执行所有代码，然后将其存储在缓存或其他内容中。我想要它执行的操作是一次，然后再次从顶部开始，这就是我一直认为循环的目的。在“批处理”（命令提示符）脚本中，可以使用“
GOTO”命令来完成。我不知道JS是否具有等效功能，但这确实是我的目标。

阅读 287

2020-05-01

共1个答案

一尘不染

正确的方法是使用单个计时器。使用setInterval，您可以实现所需的目标，如下所示：

window.onload = function start() {
    slide();
}
function slide() {
    var num = 0, style = document.getElementById('container').style;
    window.setInterval(function () {
        // increase by num 1, reset to 0 at 4
        num = (num + 1) % 4;

        // -600 * 1 = -600, -600 * 2 = -1200, etc 
        style.marginLeft = (-600 * num) + "px"; 
    }, 3000); // repeat forever, polling every 3 seconds
}

2020-05-01