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

Answer 2

基本上我有一堆图像可以循环显示并在点击它们时停止。我想在再次点击后重新开始循环......

那你为什么不这么说呢？ ;）

所以你想要在没有开始的情况下开始间隔，如果它已经开始就停止它。

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

Answer 3

我认为这不起作用的唯一原因是如果你在“dom ready”事件或其他一些函数中定义了intervalHandle，那么试着把它放在全局范围而不是定义它。

编辑：对不起第一次回复它确实是假的因为我没有完整的信息你想做什么所以回家这会帮助你

var intervalHandle = setInterval(changeImage,5000);

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

在javaScript中重新启动setInterval

3 个答案: