如何解决clearTimeouttimer不考虑-每次创建新的计时器变量
在我当前正在构建的幻灯片中,我使用计时器变量每4秒自动旋转一次幻灯片。由于还提供了手动控件,因此我想在每次使用控件时重置此计时器,以免在两张幻灯片之间发生任何过早的继承,但没有做到。
我认为这是一个范围问题,但是timer变量不在试图共享它的函数之内( showSlide(n)和changeSlide(n))。但是每次调用changeSlide函数时都会创建一个全新的计时器变量:每次使用“下一个”控件时,幻灯片自动旋转都会加快,就像多个超时同时在调用该函数一样。这是怎么了?
const slideshows = document.getElementsByClassName("js-slideshow");
[].forEach.call(slideshows,function(slideshow) {
slideshowlize(slideshow);
});
function slideshowlize(slideshow){
const desc = slideshow.getElementsByClassName("js-desc");
const slide = slideshow.getElementsByClassName("js-slide");
let timer;
let index = 0;
const slidePrev = slideshow.querySelector('.js-prev');
const slideNext = slideshow.querySelector('.js-next');
function showSlide(n){
clearTimeout(timer); // This one is not used yet
if(n < 0){
n = slide.length -1;
}
else if(n > slide.length -1){
n = 0;
}
let i;
for(i = 0; i < slide.length; i++){
slide[i].classList.remove("is-shown");
}
for(i = 0; i < desc.length; i++){
desc[i].classList.remove("is-shown");
}
slide[n].classList.add("is-shown");
desc[n].classList.add("is-shown");
index = n;
timer = setTimeout(function(){
changeSlide(1);
},4000);
}
function changeSlide(n){ // this is where the magic doesn't happen
clearTimeout(timer);
if (n > 0){
showSlide(index += 1);
} else {
showSlide(index -= 1);
}
timer = setTimeout(function(){
changeSlide(1);
},4000);
}
showSlide(index);
slidePrev.addEventListener('click',function(){
changeSlide(-1);
});
slideNext.addEventListener('click',function(){
changeSlide(1);
});
}
编辑:设置了两个不同的计时器。由于showSlide(n)已经重置了计时器,因此changeSlide(n)也无需这样做。感谢Bergi指出来。
function changeSlide(n){
//removed "clearTimeout(timer);"
if (n > 0){
showSlide(index += 1);
} else {
showSlide(index -= 1);
}
//removed "timer = setTimeout(...);"
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。