时间戳

首页 > 解决方案 > 制作香草js滑块时出现代码行问题

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

问题描述

我看过一个关于制作香草 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

标签： javascriptslider

解决方案

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

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

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

所以，我认为布拉德把它作为一个故障安全证明，如果你点击下一个或上一个按钮垃圾邮件，那么指向你刚刚跳过的当前幻灯片的指针总是会从它的类列表中删除“当前”类。

推荐阅读