javascript - 自动播放无法在我的 Javascript Slider 上运行

Question

我的目标是用 Javascript 编写一个 slider ，其中包含一个类。但我遇到了两个问题:

• 自动播放不起作用
• 如果我单击“暂停”按钮，然后再次单击“播放”按钮，自动播放也不起作用

HTML 页面位于此处: http://p4547.phpnet.org/bikes/slider.html

这是我的 JavaScript 代码:

class Diaporama {
  constructor() {
    this.controls = document.querySelectorAll('.controls');
    this.slides = document.querySelectorAll('#diaporama .slide');
    this.currentSlide = 0;
    this.n = null;
    this.playing = true;
    this.pauseButton = document.getElementById('pause');
    this.next = document.getElementById('next');
    this.previous = document.getElementById('previous');
  }

// Afficher les boutons previous, play, pause, next :
  controlling() {
    for(let i=0; i < this.controls.length; i++){
        this.controls[i].style.display = 'inline-block';
    }
  }

// Slider Automatique :
  goToSlide(n) {
    this.slides[this.currentSlide].className = 'slide';
    this.currentSlide = (n + this.slides.length)%this.slides.length;
    this.slides[this.currentSlide].className = 'slide showing';
    console.log(this.currentSlide);
  }

  nextSlide() {
    this.goToSlide(this.currentSlide + 1);
  }

  previousSlide() {
    this.goToSlide(this.currentSlide - 1);
  }

  slideInterval() {
    setInterval(this.nextSlide,5000);
  }

  pauseSlideshow() {
    this.pauseButton.innerHTML = '<i class="fas fa-play"></i>';
    this.playing = false;
    clearInterval(this.slideInterval);
  }

  playSlideshow() {
    this.pauseButton.innerHTML = '<i class="fas fa-pause"></i>';
    this.playing = true;
    this.slideInterval = setInterval(this.nextSlide,5000);
  }

  nextItem() {
  next.onclick = () => {
    this.pauseSlideshow();
    this.nextSlide();
  }
  }

  previousItem() {
    previous.onclick = () => {
      this.pauseSlideshow();
      this.previousSlide();
    }
  }

// Changement de slide par les touches du clavier :
  clickKeyboard() {
    document.addEventListener("keydown", ({keyCode}) => {
      if(keyCode === 37){
          this.nextSlide();
      }
      else if(keyCode === 39){
          this.previousSlide();
      }
  })
}

};

let slider = new Diaporama();
slider.controlling();
slider.goToSlide(0);
slider.nextSlide();
slider.previousSlide();
slider.pauseSlideshow();
slider.playSlideshow();
slider.nextItem();
slider.previousItem();
slider.clickKeyboard();

Answer 1

此问题位于 playslideShow 内。当它在 setInterval 内调用 this.nextSlide 时，this 的范围发生了变化。 this 指的是窗口。

在这种情况下，您可以使用bind()，以确保它引用 slider 对象:

playSlideshow() {
    this.pauseButton.innerHTML = '<i class="fas fa-pause"></i>';
    this.playing = true;
    this.slideInterval = setInterval(this.nextSlide.bind(this),5000);
}