制作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 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

在我看来，在这种情况下这是不必要的，但这是因为如果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 中删除“当前”类。