javascript - setInterval，单击某物然后清除Interval，然后几秒钟再次setInterval

Question

我想创建一个运行使用 setInterval 的滑块图像，当我单击缩略图时，图像滑块停止，但几秒钟后我希望它继续运行 setInterval，我被困在这里。我不知道如何编写代码以便 setInterval 再次运行

//auto animate
let counter = 0;
function imageChange() {
  bigImage.src = thumb[counter++].src;
  if(counter >= thumb.length) {
    counter = 0;
  }
}
let gallery = setInterval(imageChange, 1000);
//click thumb stop Animate then runs again
for(t of thumb) {
  t.addEventListener('click', (e) => {
    bigImage.src = e.target.src;
    clearInterval(gallery);
    //I'm stuck here :(
  });
}

标签： javascriptsetintervalclearinterval

Answer 1

pause = setTimeout(() => { gallery = setInterval(imageChange, 1000)} ,3000);

像这样

let pause;
//auto animate
let counter = 0;
function imageChange() {
  bigImage.src = thumb[counter++].src;
  if(counter >= thumb.length) {
    counter = 0;
  }
}
let gallery = setInterval(imageChange, 1000);
//click thumb stop Animate then runs again
for(t of thumb) {
  t.addEventListener('click', (e) => {
    bigImage.src = e.target.src;
    clearInterval(gallery);
    clearTimeout(pause);
    pause = setTimeout(() => { gallery = setInterval(imageChange, 1000)} ,3000);
  });
}

我会委托

let pause;
//auto animate
let counter = 0;
function imageChange() {
  bigImage.src = thumb[counter++].src;
  if(counter >= thumb.length) {
    counter = 0;
  }
}
let gallery = setInterval(imageChange, 1000);
//click thumb stop Animate then runs again
document.getElementById('thumbContainerId').addEventListener('click',function(e) {
  bigImage.src = e.target.src;
  clearInterval(gallery);
  clearTimeout(pause);
  pause = setTimeout(() => { gallery = setInterval(imageChange, 1000)} ,3000);
});