Я смотрел учебник по созданию ванильного слайдера 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

0
AbramPlus 7 Окт 2019 в 17:13

2 ответа

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

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

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

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

0
johnmikelridzz 7 Окт 2019 в 18:28

На мой взгляд, в данном случае это излишне, но по той причине, что если 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)

0
jsworld 7 Окт 2019 в 18:34