在javaScript中重新启动setInterval

}

我试图重构这个问题，但没能正确回答。任何帮助都将不胜感激！ ***添加上下文**** 基本上，我有一堆图像，循环浏览，点击后停止。我想在再次单击后重新开始循环

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

不会立即启动，您希望它在单击

myImage

后立即调用

changeImage

。第一次调用

changeImage

将在单击图像后5秒进行。您可以这样做，立即调用

changeImage

：

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

---

另一种选择是完全取消间隔（与使用相同）-当窗口在某些浏览器中不集中时，间隔可以排队，因此您可以让

changeImage

设置自己的超时：

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

---

我认为这不起作用的唯一原因是，如果在“dom就绪”事件或其他函数中定义intervalHandle，那么请尝试将其放在全局范围内，而不是定义它

编辑：很抱歉第一次回复是错误的，因为我没有你想要做什么的全部信息，所以回家这将帮助你

var timeoutHandle = setTimeout(changeImage, 5000);

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

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

基本上，我有一堆图像，循环浏览，点击后停止。我想在再次单击后重新开始循环

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

你为什么不这么说

因此，如果间隔未启动，则要启动间隔，如果间隔已启动，则要停止间隔

var intervalHandle = setInterval(changeImage,5000);

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

---

有什么不对的？发生了什么而不是你所期望的呢？这里多一点上下文会很有帮助。在单击事件中清除间隔后，为什么要再次启动间隔？我想，如果我在click事件中删除了对set interval的调用，这会起作用。请尝试不要在click处理程序中重新调用set interval。这将告诉您它是否正常工作。您是否可以重新编写

…重新启动此正在更改的图像功能。

。一、 首先，我不能理解它的意思。@Alex实际上当我写这篇文章时，我没有意识到我在一次点击中放置了两个事件。我想这就是问题所在？这似乎是个陷阱。但这是否就是他“无法正确理解”的地方，这是任何人的猜测。@AlexWayne是的，这有点像是暗中捅了一刀，但希望它能起到一些作用：-）他的例子中的变量范围是正确的，无论是在全局范围内还是在全局范围内。你的建议是把不需要的东西强制放到全球范围内，这是不明智的。很抱歉，我在编辑我的AnwerThank之前就看到了这个问题\0/：）有趣的是，我明白了为什么您最初创建了运行变量（要在条件中使用？对吗？）。如果“true”，则会触发“clearInterval”。但为什么要将其指定为false呢？“else”也是如此……我知道这会使它重新启动/调用changeImage函数，但是布尔值在那里做什么呢？再次感谢亚历克斯！每次单击，您都希望执行不同的操作。有时你想做一件事（开始间歇），有时你想做其他事情（停止间歇）。布尔变量使您可以查看当前状态，然后执行适当的操作。在脚本中的任何其他地方，如果您想检查间隔是否正在运行，只需检查

running

是否为

true

。感谢您的解释！