正确的方法是使用单个计时器。使用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
}

你不想要while(true)，那会锁定你的系统。

你想要的是一个超时，它自己设置一个超时，像这样：

function start() {
  // your code here
  setTimeout(start, 3000);
}

// boot up the first call
start();

这是一个不错的，整洁的解决方案：（另请参阅现场演示 ->）

window.onload = function start() {
    slide();
}

function slide() {
    var currMarg = 0,
        contStyle = document.getElementById('container').style;
    setInterval(function() {
        currMarg = currMarg == 1800 ? 0 : currMarg + 600;
        contStyle.marginLeft = '-' + currMarg + 'px';
    }, 3000);
}

既然您正在努力学习，请允许我解释一下这是如何工作的。

首先我们声明两个变量：currMarg和contStyle。 currMarg是一个整数，我们将使用它来跟踪/更新容器应具有的左边距。我们在实际更新函数之外（在闭包中）声明它，以便它可以不断更新/访问而不会丢失其值。 contStyle只是一个方便的变量，它使我们可以访问容器样式，而无需在每个间隔上定位元素。

接下来，我们将使用setInterval建立一个应每 3 秒调用一次的函数，直到我们告诉它停止（这是无限循环，不会冻结浏览器）。它的工作原理与 完全一样setTimeout，只是它会无限发生直到被取消，而不是只发生一次。

我们将匿名函数传递给setInterval，它将为我们完成我们的工作。第一行是：

currMarg = currMarg == 1800 ? 0 : currMarg + 600;

这是一个三元运算符。它将分配currMarg的值0，如果currMarg等于1800，否则会增加currMarg的600。

对于第二行，我们只需将我们选择的值分配给containers marginLeft，我们就完成了！

注意：对于演示，我将负值更改为正值，因此效果是可见的。

Perhps 这就是你要找的。

var pos = 0;
window.onload = function start() {
    setTimeout(slide, 3000);
}
function slide() {
   pos -= 600;
   if (pos === -2400)
     pos = 0;
   document.getElementById('container').style.marginLeft= pos + "px";
   setTimeout(slide, 3000);
}

您setTimeout()连续调用十次，因此它们几乎同时到期。你真正想要的是：

window.onload = function start() {
    slide(10);
}
function slide(repeats) {
    if (repeats > 0) {
        document.getElementById('container').style.marginLeft='-600px';
        document.getElementById('container').style.marginLeft='-1200px';
        document.getElementById('container').style.marginLeft='-1800px';
        document.getElementById('container').style.marginLeft='0px';
        window.setTimeout(
          function(){
            slide(repeats - 1)
          },
          3000
        );
    }
}

这将调用slide(10)，然后设置3秒超时来调用slide(9)，设置超时来调用slide(8)，等等。当调用slide(0)时，不再有超时设置。