SetInterval、ClearInterval、幻灯片放映不起作用

Question

我试过了，我看了很多Whosebugs，然后，我放弃了。这是我的代码。这是一个简单的幻灯片，其中幻灯片是不断变化的图像，分页是显示图像显示数量的点。

由于某种原因，图像（幻灯片）发生了变化，但所选的点没有变化（它显示的好像总是在第一位）。控制台日志 returns 只有第一个函数运行 :

first
0
0
1
2
3

出于某种原因，当调用 nosotros.setSlides(3) 时，它会进入正确的幻灯片放映并选择正确的分页点，但 setInterval 永远不会停止，分页点不会再次移动，幻灯片会跳转到最后一个下一个位置（如果我在幻灯片 0 上单击 3，我将转到 3，然后转到 1）。

class Slides {
    slideIndex;
    interval;

    slides;
    pagination;

constructor() {
  this.slides = document.getElementsByClassName("slide");
  this.pagination = document.getElementsByClassName("pagination-dot");
  this.setSlides();
}

    setSlides(x = -1){ 
      if(x == -1){
        console.log('first');
        this.slideIndex = 0;
        this.interval = setInterval( this.showSlides(), 5000 );
      } else {
        clearInterval(this.interval);
        this.slideIndex = x;
        this.interval = setInterval( this.showSlides(), 5000);
      }
    }

    showSlides(){
      console.log(this.slideIndex);

      this.slideIndex < 0 ? this.slideIndex = 0 : 0;
      this.slideIndex >= this.slides.length ? this.slideIndex = 0 : 0;

      for( let i = 0; i < this.slides.length; i++){
        if( i != this.slideIndex ){
          this.slides[i].classList.add('opacity-0'); 
          this.slides[i].classList.remove('opacity-1');
          if( this.pagination[i].classList.contains('selected') ){
            this.pagination[i].classList.remove('selected');
          }
          console.log(i);
        } else { 
          console.log(i);
          this.slides[i].classList.add('opacity-1');       
          this.slides[i].classList.remove('opacity-0');
          if(!this.pagination[i].classList.contains('selected')){
            this.pagination[i].classList.add('selected');
          }
          
        } 
      }
      
      this.slideIndex++;
    };

}

let nosotros = new Slides();

我没意识到什么？

Answer 1

您正在调用该函数并将其 returns 分配给间隔。您需要分配功能。

setSlides(x = -1){ 
  if (this.interval) {
    clearInterval(this.interval);
  }
  this.slideIndex = x == -1 ? 0 : x;
  this.interval = setInterval( () => this.showSlides(), 5000 );
  // this.interval = setInterval(this.showSlides.bind(this), 5000 );
}

SetInterval、ClearInterval、幻灯片放映不起作用

SetInterval, ClearInterval, Slideshow wont work

javascript

class

setinterval

clearinterval