Question

我刚刚开始学习面向对象的Javascript，我需要一些帮助来弄清楚如何取消/阻止某个函数通过另一个函数执行。我正在构建一个class Music（实际上不是在练习），它的构造函数包含一些参数，基本上我想在需要时播放和暂停音乐。

我想让它有点有趣，如果我可以在播放歌曲时数秒，并且如果我达到了秒数，则歌曲会持续停止/暂停计数器，并在以后我继续播放时停止了。

我遇到的问题是我想暂停计数器，但计数器似乎继续执行。

我的类对象中有两个函数。 play()和pause()函数。最初，我执行play()函数，在“音乐”结束之前，我执行pause()，该函数应该停止计数器。

我尝试向构造函数添加参数：this.isPlaying = false，并且当play()运行时this.isPlaying变成true，如果我运行pause() this.isPlaying再次变为false，停止计数器并给我计时的秒数。

当我运行pause()时，我确实得到了秒数，但是无论如何，play()函数仍在运行。

class Music {
  constructor(title, uploader, seconds, isPlaying, startTime) {
    this.title = title;
    this.uploader = uploader;
    this.seconds = seconds;
    this.isPlaying = false;
    this.startTime = 0;
  }

  play() {
    if (!this.isPlaying && this.startTime == 0) {
      this.isPlaying = true;
      console.log('The song: ' + this.title + ' Started');
      var startSong = setInterval(() => {
        this.startTime++;
        if (this.startTime == this.seconds) {
          this.isPlaying = false;
          clearInterval(startSong);
          console.log("song ended");
        }
      }, 1000);
    } else {
      console.log(this.startTime);
      return;
    }
  }

  pause() {
    // console.log(this.isPlaying);
    console.log("executed pause");
    this.isPlaying = false;
  }
}

var fstSong = new Music('Stairways to Heaven', 'Pablo Fransisco', 15);
fstSong.play();

我正在寻找pause()来停止计数器，并将fstSong.startTime设置为其停止的秒数。

Answer 1

您可以清除间隔，以声明用于设置间隔的全局变量，并清除调用暂停功能的间隔

class Music {
  constructor(title, uploader, seconds, isPlaying, startTime) {
    this.title = title;
    this.uploader = uploader;
    this.seconds = seconds;
    this.isPlaying = false;
    this.startTime = 0;
  }

  play() {
    if (!this.isPlaying && this.startTime == 0) {
      this.isPlaying = true;
      console.log('The song: ' + this.title + ' Started');
      //setting a global variable 
      window.startSong = setInterval(() => {
        this.startTime++;
        if (this.startTime == this.seconds) {
          this.isPlaying = false;
          clearInterval(window.startSong);
          console.log("song ended");
        }
      }, 1000);
    } else {
      console.log(this.startTime);
      return;
    }
  }

  pause() {
    // console.log(this.isPlaying);
    console.log("executed pause");
    this.isPlaying = false;
    clearInterval(window.startSong);// clearing the interval on click function
  }
} 


var fstSong = new Music("song title","song uploader", 15);
fstSong.play();

//Calling pause function on click.
fstSong.pause();

如何通过类对象停止某个函数与另一个函数一起运行

1 个答案: