如何使用setTimeout（），JavaScript

我已经在我的图像库幻灯片中添加了一个“播放”按钮，现在当我按下这个按钮时，图片应该每3000毫秒更改一次

我知道我需要在for循环中使用“setTimeout（）”，而我的var I将不会达到数组_pics.lenght的值。 但我不能让它工作

play.onclick = function play() {
    var i;
    var ind = index;
    document.getElementById('largeImg').src = arr_big[index].src;

    //Tryed to put slide() function inside the for loop which was inside setTimeout(), get a syntax errors.
    var slide = function slide() {
        i = ind;
        ind += 1;
        index = ind;
        document.getElementById('largeImg').src = arr_big[ind].src;
    };

    slide(); //I have tryed setTimeout(slide(), 3000) here inside the for loop. Does not work!

};

有人能帮我把它弄好吗？如何使用setTimeout（）和for循环？

---

谢谢。

您也可以使用下面的方法

setTimeout(function () { slide(); }, 3000);

或

---

如果希望重复操作，通常最好使用setInterval（）而不是setTimeout（），并在希望停止操作时使用clearInterval（）。我会将函数定义从onclick处理程序中取出，并确保索引计数器是全局的，而不是函数的本地的。对你来说只是一些起点

因此，一些类似于

var index = 0;
var timer = 0;
var maxNumOfImages = arr_big.length;

play.onclick = playMe; //changed the function name to avoid confusion between button and function
stop.onclick = stopMe;

function playMe() {
    document.getElementById('largeImg').src = arr_big[index].src;
     timer = setInterval( slide, 3000 );
}

function slide() {
    index += 1;
    if (index == maxNumOfImages) {
       index = 0;
    }
    document.getElementById('largeImg').src = arr_big[index].src;
 }

function stopMe() {
    clearInterval( timer );
}

---

您必须在slide函数中调用setTimeout，以每3秒重复一次。 我认为你不需要命名你的每一个函数

play.onclick = function() {
    var i;
    var ind = index;
    document.getElementById('largeImg').src = arr_big[index].src;

    //Tryed to put slide() function inside the for loop which was inside setTimeout(), get a syntax errors.
    var slide = function() {
        i = ind;
        ind += 1;
        index = ind;
        document.getElementById('largeImg').src = arr_big[ind].src;

        setTimeout(slide, 3000);
    };

    slide();

};

编辑：也可以使用setInterval：

play.onclick = function() {
    var i;
    var ind = index;
    document.getElementById('largeImg').src = arr_big[index].src;

    setInterval(
        function() {
            i = ind;
            ind += 1;
            index = ind;
            document.getElementById('largeImg').src = arr_big[ind].src;
        },
        3000
    );
};

---

如果需要缩写来播放/暂停循环，则需要使用setInterval

范例

(function() {
   var arr_big = [
    {src:"http://placehold.it/350x150"},
    {src:"http://placehold.it/350x250"},
    {src:"http://placehold.it/350x350"}    
   ];

 var iid, index;

function  slide () {        
   index = (index+1 == arr_big.length) ? 0 : index +1;
   document.getElementById('largeImg').src = arr_big[index].src;
}

playBtn.onclick = function () { 
   index = 0
   iid = setInterval(slide       , 500);
}
stopBtn.onclick = function() {
  clearInterval(iid)
}
})();

HTML

播放
停止

---

这是一个工作

我解决了它，这是我的代码

谢谢大家！你们都帮了我大忙

play.onclick = function play() {
    document.getElementById('largeImg').src = arr_big[index].src;

    var slide = function slide() {
        if(index > arr_big.length-5) {
             index = 0;
         }
         index += 1;
         document.getElementById('largeImg').src = arr_big[index].src;
         setTimeout(slide, 1000);                           
     };
     slide();
};

---

实际设置超时（幻灯片，1000）；可以，但我需要自动完成。因此，如果我添加一个for循环，比如：for（i；iIs），它可能以某种方式实现：setTimeout（for（i；i<button id="playBtn">play</button> <button id="stopBtn">stop</button> <p><img src="http://placehold.it/350x150" id="largeImg" /></p>

play.onclick = function play() {
    document.getElementById('largeImg').src = arr_big[index].src;

    var slide = function slide() {
        if(index > arr_big.length-5) {
             index = 0;
         }
         index += 1;
         document.getElementById('largeImg').src = arr_big[index].src;
         setTimeout(slide, 1000);                           
     };
     slide();
};