javascript - 在 javaScript 中重新启动 setInterval

Question

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

我试图重构这个问题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);
};

Answer 1

我预计问题是 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();
};