重新启动的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

回答

相关问题