在 javaScript 中重新启动 setInterval

Restarting setInterval in javaScript

本文关键字：setInterval 重新启动 javaScript      更新时间：2024-05-31
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，但无法正确处理。任何帮助将不胜感激！添加了上下文****基本上，我有一堆图像，它们在单击它们时循环并停止。我想在再次点击时重新开始循环...

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

我希望问题是setInterval不会立即触发，并且您希望它在您单击myImage后立即调用changeImage。第一次调用changeImage将在单击图像后的 5 秒。您可以执行以下操作以立即调用changeImage：

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

另一种选择是完全取消间隔(就像这个答案一样(——当窗口在某些浏览器中没有聚焦时，间隔可能会排队，所以你可以changeImage设置自己的超时：

var timeoutHandle = setTimeout(changeImage, 5000);
function changeImage() {
    // ...
    timeoutHandle = setTimeout(changeImage, 5000);
}
myImage.onclick = function () {
    clearTimeout(timeoutHandle);
    changeImage();
};

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

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

因此，您希望在间隔未启动时启动间隔，如果间隔已启动，则停止间隔。

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

我认为这不起作用的唯一原因是如果您在"dom ready"事件或其他函数中定义 intervalHandle，因此请尝试将其置于全局范围内而不是定义它。

编辑：对不起，第一个回复确实是错误的，因为我没有你想做什么的完整信息，所以回家这将帮助你 

var intervalHandle = setInterval(changeImage,5000);
myImage.onclick = function(){
  if (intervalHandle > -1) {
    clearInterval(intervalHandle);
    intervalHandle = -1;
  } else {
    intervalHandle = setInterval(changeImage,5000);
  }
};
相关文章：