如何使用setTimeout（），JavaScript

Question

我在圖庫幻燈片中添加了一個“播放”按鈕，例如，當我按此按鈕時，圖片應每隔3000毫秒更改一次。

我知道我需要在for循環內使用“ setTimeout（）”，而我的var不會達到array_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循環？ 謝謝。

Answer 1

如果要重復操作，通常最好使用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 );
}

Answer 2

您也可以使用以下方法。

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

要么

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

Answer 3

您必須將setTimeout調用到slide函數中，以每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
    );
};

Answer 4

如果您需要精通播放/暫停循環，則需要使用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

<button id="playBtn">play</button>
<button id="stopBtn">stop</button>
<p><img src="http://placehold.it/350x150" id="largeImg" /></p>

這是一個工作的jsfiddle

Answer 5

我解決了，這是我的代碼。

感謝大伙們！ 你們都幫了我很多！

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();
};