Question

我看了一个制作香草JS滑块的教程，由于它很容易理解，所以我理解了整个代码，但是即使您删除了这行代码，第一行代码对我也没有任何意义。滑块效果很好，您能否向我解释一下，因为制作视频的那个人没有解释该代码行的作用。

我不理解的代码行，它在代码中做什么？

 setTimeout(() => current.classList.remove('current'));

还有整个JS代码

const slides = document.querySelectorAll('.slide');
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
const auto = false; // Auto scroll
const intervalTime = 5000;
let slideInterval;

const nextSlide = () => {
  // Get current class
  const current = document.querySelector('.current');
  // Remove current class
  current.classList.remove('current');
  // Check for next slide
  if (current.nextElementSibling) {
    // Add current to next sibling
    current.nextElementSibling.classList.add('current');
  } else {
    // Add current to start
    slides[0].classList.add('current');
  }
  setTimeout(() => current.classList.remove('current'));
};

const prevSlide = () => {
  // Get current class
  const current = document.querySelector('.current');
  // Remove current class
  current.classList.remove('current');
  // Check for prev slide
  if (current.previousElementSibling) {
    // Add current to prev sibling
    current.previousElementSibling.classList.add('current');
  } else {
    // Add current to last
    slides[slides.length - 1].classList.add('current');
  }
  setTimeout(() => current.classList.remove('current'));
};

// Button events
next.addEventListener('click', e => {
  nextSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

prev.addEventListener('click', e => {
  prevSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

// Auto slide
if (auto) {
  // Run next slide at interval time
  slideInterval = setInterval(nextSlide, intervalTime);
}

这是整个代码的链接。 https://codepen.io/bradtraversy/pen/oVPBaa

Answer 1

因为它是一个setTimeout，所以此函数调用：

() => current.classList.remove('current');

发生与全局上下文完全不同的执行上下文（顺便说一句，如果您在setTimeout中发出第二个参数，则意味着它在0毫秒内发生，尽管是瞬时的，但仍在正常事件之外发生循环，因为它的本质是setTimeout函数）

因此，我认为Brad将其作为故障安全证明，如果您以垃圾方式单击下一个或上一个按钮，则指向您刚刚跳过的当前幻灯片的指针将始终从中删除“当前”类它的classList。

Answer 2

在我看来，在这种情况下这不是必需的，但这是因为如果不执行current.classList.remove('current')，则将最后执行setTimeout(() => current.classList.remove('current'));中的代码。这就像保险。看一下简短的理论：

console.log('One');
setTimeout(()=>console.log('Two'));
console.log('Three');

The console logs: One, Three, Two.

之所以会发生这种情况，是因为setTimeout中的代码设置为回调queque，并且仅在堆栈为空时才执行，因为setTimeout是异步函数。（setTimeout是一个Web API函数，因此，在进入堆栈之后，在进入回调队列之前，它将被推送到Web API框中）

制作香草js滑块时出现代码行问题

2 个答案: