javascript - 单击按钮后再次启动 setInterval
问题描述
几天前我开始使用 js,并制作了一个滑块,当单击按钮时会更改图像,并制作了一个每 5 秒自动更改图像的计时器。但是当我点击按钮时,计时器没有重置。我使用 clearInterval 来停止计时器,但我不知道如何调用它来重新启动它。这是我的 Js 代码。
//progression bar
var width = 1;
//the images
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
//the buttons
const suivant = document.getElementById('button1');
const precedent = document.getElementById('button2');
//change image every 5 sec
var counter = 0;
var imageChange;
imageChange = setInterval (function () {
if (counter >= 2 ){
counter -= 2;
document.getElementById("currentImage").src = images[counter];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 5000);
//make buttons work
precedent.onclick = function() {
width = 0;
clearInterval(imageChange);
//I know i have to put something on this line with v imageChange but i dont know what
if (counter <= 0){
counter += 2;
document.getElementById("currentImage").src = images[counter];
}
else{
document.getElementById("currentImage").src = images[--counter];
};
}
suivant.onclick = function() {
width = 0;
clearInterval(imageChange);
//I know i have to put something on this line with imageChange but i dont know what
if (counter >= 2 ){
counter -= 2;
document.getElementById("currentImage").src = images[counter];
}
else{
document.getElementById("currentImage").src = images[++counter];
};
}
//progression bar
function progression(){
var progres = document.getElementById('progression');
var temps = setInterval(frame, 50);
function frame() {
if (width >= 100){
width = 0;
}
else{
width++;
progres.style.width = width + '%';
}
}
}
window.onload = progression;
随意说是否必须更改我在代码中的某些方式以使其更清洁。并感谢您帮助我:)
解决方案
最主要的是,您必须setInterval
在单击后再次调用,才能重新启动间隔。调用clearInterval
停止间隔运行。
这是一种清理它的方法:
let counter = 0;
let intervalId;
const getNextImage = (direction) => {
const increment = direction === 'forward' ? 1 : -1;
counter += increment;
if (counter > images.length - 1) {
counter = 0;
}
if (counter < 0) {
counter = images.length - 1;
}
document.getElementById("currentImage").src = images[counter];
};
const startImageLoop = (direction) => {
width = 0;
clearInterval(intervalId);
getNextImage(direction);
intervalId = setInterval(() => {
getNextImage(direction);
}, 5000);
}
precedent.onClick = () => startImageLoop('backward');
suivant.onClick = () => startImageLoop('forward');
推荐阅读
- excel - 拆分列不适用于按钮
- python - 如何在转换函数中包含两个 lambda 操作?
- java - 在同一个线程中创建多个定时器会导致主线程滞后
- react-native - 在 React Native 中根据 Redux 状态显示或不显示标签栏项目
- php - Sentry:如何在 php 中配置 sentry?
- performance - EC2 中的响应极慢(宽度小于 100 个请求)
- java - 更改 RecyclerView 的所有项的 View 可见性
- elixir - 创建混合项目时,所有 .ex 文件都必须在 /lib 文件夹中吗?
- flutter - 如何在 Flutter 中自动播放视频?
- java - 在较少的代码中使用 java 流转换和访问对象的属性