图像刷新setInterval，带有“停止开始”按钮

Question

我的图像设置为每1000毫秒刷新一次。

var int_time = setInterval(function() {
var myImageElement = document.getElementById('myImage');
myImageElement.src = 'https://api.evercam.io/v1/cameras/<%= @camera["id"] %>/snapshot.jpg?api_id=<%= current_user.api_id -%>&api_key=<%= current_user.api_key -%>?rand=' + new Date().getTime();
}, 1000);

img.onclick = function() { clearInterval(int_time); }

我想添加一个停止/启动按钮，以防止它在点击时刷新并重新启动其点击，就像播放暂停按钮一样。

有谁知道如何通过刷新图片实现这一目标？

Answer 1

保存setInterval的返回值，然后使用clearInterval停止用户单击时的间隔

var intervalId = setInterval(...);

img.onclick = function() { clearInterval(intervalId); }

Answer 2

var int_time = setInterval(function() {
var myImageElement = document.getElementById('myImage');
myImageElement.src = 'https://api.evercam.io/v1/cameras/<%= @camera["id"] %>/snapshot.jpg?        api_id=<%= current_user.api_id -%>&api_key=<%= current_user.api_key -%>?rand=' + new Date().getTime();
}, 1000);

现在停止间隔只需调用

clearInterval(int_time);

再次重启间隔调用

var int_time = setInterval(function() {
var myImageElement = document.getElementById('myImage');
myImageElement.src = 'https://api.evercam.io/v1/cameras/<%= @camera["id"] %>/snapshot.jpg?        api_id=<%= current_user.api_id -%>&api_key=<%= current_user.api_key -%>?rand=' + new Date().getTime();
}, 1000);