使用“停止-启动”按钮设置图像刷新间隔

Image refresh setInterval with Stop Start button

本文关键字：图像 设置 刷新 按钮 停止 启动 使用      更新时间：2023-09-26

我有一个设置为每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); }

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

有人知道我将如何实现这一点来刷新图像吗？

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

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

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);
相关文章：