Javascript 使用setinterval不断单击的id

我正在创建一个音频网络播放器，我希望它能连续工作，这意味着当一段音频播放完毕后，它会继续播放下一段

然而，我遇到了一个问题，即一切正常，但一旦上一个音频结束播放，下一个音频开始播放，每2秒，新音频将播放&暂停连续

这是我当前的

JavaScript

代码块：

function playPauseButton(button, wave, trackID){
    var button = $(button); // play button

    if(wave.isPlaying()){ // if the audio is playing and the user clicks play button, pause the audio
        button.removeClass("playing");
        wave.pause();
    } else { // vice versa
        button.addClass("playing");
        wave.play();
    }
    waveDuration = wave.getDuration(); // audio duration
    var nextTrack = ++trackID; // get the current audio track ID and plus 1 to get the new track ID

    setInterval(function(){ // check every 2 seconds if the audio is finished playing
        if(wave.getCurrentTime() >= waveDuration){ // if it has, make the play button a pause button
            button.removeClass("playing");
            $(nextTrack + '-ppbutton').click(); // simulate new track play button click
        }    
    }, 2000);
}

&我的非常简单的

HTML

play按钮：

<!-- onclick play audio (if paused), pause audio (if playing) !-->
<div onclick="playPauseButton(this, a2wave, 2);" id="2-ppbutton"></div>
<!-- 2 is the id !-->

我花了几个小时试图弄明白这一点，但是，它仍然让我困惑（我不太擅长JavaScript）

感谢所有的帮助和建议

我试着对每件事都发表评论，以帮助你理解

更新：

感谢Vlaz解决了我的问题；真的很感激！：）

然而，如果人们仍然想提出建议或编辑，你也非常欢迎

---

谢谢。

每次单击播放/暂停按钮，您都会调用

setInterval

。因此，您可能同时有多个基于时间的触发器，并且条件可能一直为真

如果将对

setInterval

的调用替换为：

var trigger = setInterval(function(){ // check every 2 seconds if the audio is finished playing
        if(wave.getCurrentTime() >= waveDuration){ // if it has make the play button, a pause button
            button.removeClass("playing");
            $(nextTrack + '-ppbutton').click(); // simulate new track play button click
            clearInterval(trigger);
        }    
    }, 2000);

---

每次单击播放/暂停按钮时，都会调用

setInterval

。因此，您可能同时有多个基于时间的触发器，并且条件可能一直为真

如果将对

setInterval

的调用替换为：

var trigger = setInterval(function(){ // check every 2 seconds if the audio is finished playing
        if(wave.getCurrentTime() >= waveDuration){ // if it has make the play button, a pause button
            button.removeClass("playing");
            $(nextTrack + '-ppbutton').click(); // simulate new track play button click
            clearInterval(trigger);
        }    
    }, 2000);

问题 每次按下按钮时，您使用的

setInterval

都会启动一个新的股票代码。所以在三次压榨之后，你会有三次压榨。另外，请记住，每个人也将运行自己的检查。所以我相信我知道你的问题在哪里，这里是一个概述

setInterval

第一次被调用，我们称之为intervalPrime。让我们假设这首歌的持续时间是60秒

这首歌每2秒检查一次，最后结束

单击播放按钮时，将调用一个新的

setInterval

——这将创建一个新的间隔——我们将其称为intervalSecond。这将是一个新的歌曲和新的持续时间检查，但细节是无关的

这首歌会播放，并在间隔时间内监控是否已完成

与此同时，intervalPrime仍在进行检查。由于

wave.getCurrentTime（）

很可能返回

60

（歌曲结束），因此它所做的检查是

60>=60

，并通过，因此它单击按钮

如何避免 删除旧的间隔 您可以做的是确保一次只有一个

setInterval

处于活动状态。该函数返回计时器的ID，因此您可以执行类似的操作

var currentChecker;

function playPause() {
   /* .... */
   if (shouldClick) {
     clearTimeout(currentChecker);
     currentChecker = setInterval( /* ... */ );
   }
}

（说明性）

因此，基本上，在开始一个新的间隔之前，通过停止上一个间隔来保持一个单一的间隔

只保持一次间隔 另一种方法是只激活一个间隔并保持一个状态，这样您就可以

var masterLoop = setInterval(function() {
    var wave = getCurrentWave(); //fetching it will depend on your application

     if(wave.getCurrentTime() >= wave.getDuration()){
          /* handle what happens */
     }
} , 2000);

歌曲结束时使用

setInterval

。 我不熟悉用于播放声音的API，但是如果可以挂接到end事件，那么在出现这种情况时，您可以使用simple

setTimeout

，如下所示

  //assuming the API allows to do something like this
  wave.onFinish(function() {
      setInterval(playNext, 2000);
  })

不止一个 如果API没有提供钩住已完成的播放事件的方法，那么更好的选择是将最后两种方法结合起来。有一个主循环来检查曲目的状态，完成后，使用

setInterval

来安排下一首歌曲。间隔延迟可能需要设置得更低，但这会使曲目之间的时间更加一致，因为一首歌可能会结束，间隔0.3秒后，它会检查并播放该歌，或者一首歌可能会在间隔结束后立即结束，因此间隔为2秒

维护一个

setTimeout

这类似于第一个清除旧间隔的建议，但并不完全相同

问题是，你不需要一直检查这首歌是否已经播放完毕，因为你已经知道它什么时候会结束。因此，播放时，您可以使用

setTimeout

将下一首歌曲排队

//assuming wave returns time in milliseconds
var playNextIn = (wave.getDuration() - wave.getCurrentTime()) + 2000;

nextSongTimer = setTimeout(function() {
    /* code to play next song */
}, playNextIn);

所以，这样你就不需要一直检查了

但是，唯一的问题是如果用户单击“暂停”，在这种情况下，您将需要调用

clearInterval（nextSongTimer）

，因为不再需要它。这样，每次播放一首歌时，只需启动计时器一次。

问题 每次按下按钮时，您使用的

setInterval

都会启动一个新的股票代码。所以在三次压榨之后，你会有三次压榨。另外，请记住，每个人也将运行自己的检查。所以我相信我知道你的问题在哪里，这里是一个概述

setInterval

第一次被调用，我们称之为intervalPrime。让我们假设这首歌的持续时间是60秒

这首歌每2秒检查一次，最后结束

单击播放按钮时，将调用一个新的

setInterval

——这将创建一个新的间隔——我们将其称为intervalSecond。这将是一个新的歌曲和新的持续时间检查，但细节是无关的

这首歌会播放，并在间隔时间内监控是否已完成

与此同时，intervalPrime仍在进行检查。由于

wave.getCurrentTime（）

很可能返回

60

（歌曲结束），因此它所做的检查是

60>=60

，并通过，因此它单击按钮

如何避免 删除旧的间隔 您可以做的是确保一次只有一个

setInterval

处于活动状态