重新啓動的setInterval在JavaScript

var myImage = document.getElementById("mainImage"); 

var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg", 
        "_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"]; 
var imageIndex = 0; 

function changeImage() { 
myImage.setAttribute("src",imageArray[imageIndex]); 
imageIndex++; 
if (imageIndex >= imageArray.length) { 
    imageIndex = 0; 
}

}重新啓動的setInterval在JavaScript

我試圖重構這個問題restarting a setInterval，但無法得到它的權利。任何幫助，將不勝感激！ ***添加上下文**** 基本上，我有一堆圖像，循環並停止點擊它們。我想在再次單擊重新啓動循環...

var intervalHandle = setInterval(changeImage,5000); 

//Basically I want a clearInterval on a click and then restart this changing image function it. 

myImage.onclick = function(){ 
    clearInterval(intervalHandle); 
    intervalHandle = setInterval(changeImage,5000); 
};

來源

2013-12-09 Antonio Pavicevac-Ortiz

什麼是不正確的呢？會發生什麼，而不是你所期望的？ –

更多的上下文會有所幫助。爲什麼你在點擊事件中再次開始了間隔？我想如果我刪除了在點擊事件中設置間隔的呼叫，這將工作。 –

不要在click處理程序中重新調用setInterval。這會告訴你確定它是否正常工作 –

基本上我有一些圖片，這循環並停止點擊它們。我想再次點擊重新開始騎車...

那麼你爲什麼不這麼說？ ;）

所以你想要開始間隔，如果它沒有開始，並停止它，如果它啓動。

var intervalHandle = setInterval(changeImage, 5000); // start the interval by default 
var running = true; // true if the interval is running, false if its not. 

myImage.onclick = function(){ 
    if (running) { 
    clearInterval(intervalHandle); // stop interval 
    running = false; // mark interval as stopped 
    } else { 
    intervalHandle = setInterval(changeImage, 5000); // start interval 
    running = true; // mark interval as started 
    changeImage(); // also change the image right now 
    } 
};

來源

2013-12-10 00:04:37

謝謝！ \ 0/ :)有趣的是，我明白你爲什麼最初創建了運行變量（在條件？中使用？）。如果'真''清除間隔'發生。但爲什麼把它分配給假？ 'else'也一樣...我看到它使得它重新啓動/調用changeImage函數，但是在那裏做什麼布爾值？再次感謝亞歷克斯！ –

每次點擊你想做的事情不同。有時你想做一件事（開始間隔），其他時候你想做其他事情（停止間隔）。布爾變量讓你看到當前狀態是什麼，然後做適當的事情。無論腳本中的其他位置是否要檢查間隔是否正在運行，只需檢查「運行」是否爲「true」即可。 –

感謝您的解釋！ –

我想到的問題是，setInterval不會立即火了，你希望它儘快致電changeImage你點擊myImage。點擊圖像後，第一次撥打changeImage將會是5秒鐘。你可以做這樣的事情，就立即打電話changeImage：

myImage.onclick = function() { 
    clearInterval(intervalHandle); 
    intervalHandle = setInterval(changeImage, 5000); 
    changeImage(); 
};

另一種選擇是，爲了消除全部的時間間隔（如this answer） - 間隔可以排隊時不集中在一些瀏覽器窗口，所以你可以有changeImage樹立了自己的超時：

var timeoutHandle = setTimeout(changeImage, 5000); 

function changeImage() { 
    // ... 
    timeoutHandle = setTimeout(changeImage, 5000); 
} 

myImage.onclick = function() { 
    clearTimeout(timeoutHandle); 
    changeImage(); 
};

來源

2013-12-09 23:36:40 cmbuckley

這似乎是一個可能的錯誤。但是否有人猜測他是否「無法正確對待」。 –

@AlexWayne是的，它在黑暗中有點刺，但希望它證明是有用的:-) – cmbuckley

-2

爲什麼我認爲這不會工作的唯一原因是，如果你在一個「DOM已準備就緒」事件定義intervalHandle或其他一些功能，所以儘量把它放在全球範圍ra而不是定義它。

編輯：對不起，第一個回覆它的確是假的東陽我沒有了你想這樣的家做充分的信息，這將有助於你

var intervalHandle = setInterval(changeImage,5000); 

myImage.onclick = function(){ 
    if (intervalHandle > -1) { 
    clearInterval(intervalHandle); 
    intervalHandle = -1; 
    } else { 
    intervalHandle = setInterval(changeImage,5000); 
    } 
};

來源

2013-12-09 23:38:56 thejigsaw

他的示例中的變量範圍是正確的，無論是否在全局範圍內。你的建議是將事情推入不應該需要的全球範圍，這是不好的建議。 –

對不起，我看到了這個問題，甚至在編輯完整的上下文之前我編輯了我的anwer – thejigsaw

重新啓動的setInterval在JavaScript

回答

相關問題