制作vanilla js滑块时的代码行问题

Question

我看过一个关于制作 vanilla JS 滑块的教程，我已经理解了整个代码，因为它很简单，但是 1 行代码对我来说没有任何意义，即使您删除了该行代码，滑块也可以完美运行好吧，你能向我解释一下它是做什么的，因为制作视频的人没有解释那行代码的作用。我不明白的代码行，它在代码中做什么？ 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 scrollconst 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 eventsnext.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 slideif (auto) {  // Run next slide at interval time  slideInterval = setInterval(nextSlide, intervalTime);}这是整个代码的链接。 https://codepen.io/bradtraversy/pen/oVPBaa

Answer 1

在我看来，在这种情况下这是不必要的，但这是因为如果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 中的代码设置为回调队列，并且只有在堆栈为空时才会执行，因为 setTimeout 是一个异步函数。（setTimeout是一个Web API函数，所以在入栈后回调队列前会被推送到Web API框）

Answer 2

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

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

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

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