Question

几天前，我开始使用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;

可以随意说一下是否必须更改代码中的某些方式以使其更整洁。感谢您帮助我：）

Answer 1

最主要的是，单击后必须再次调用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');

单击按钮后再次启动setInterval

1 个答案: