Проблема со строкой кода при создании слайдера vanilla js

Question

Я смотрел учебник по созданию ванильного слайдера 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 является функцией веб-API, поэтому после нахождения в стеке и до нахождения в очереди обратного вызова будет помещен в поле веб-API)

Answer 2

Поскольку это setTimeout, то вызов этой функции:

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

происходит в совершенно ином контексте выполнения, как глобальный контекст (кстати, если вы передаете второй параметр в setTimeout, тогдаэто означает, что это происходит за 0 миллисекунд, хотя и мгновенно, но все же происходит вне обычного цикла обработки событий, учитывая природу его функции setTimeout)

Итак, я думаю, что Брэд назвал это надежным доказательствомчто если вы нажимаете спам-кнопку «Следующая» или «Предыдущая», то указатель на текущий слайд, в котором вы только что пропустили, всегда удаляет «текущий» класс из его classList.