1

由于历史 API 脚本，我有一个播放/暂停按钮需要在 timeupdate 时更改。更改 timeupdate 上的按钮似乎毫无意义，但事实并非如此，正如我将解释的那样。

我有一个历史 API 脚本，它使用户能够在页面加载之间切换而无需刷新整个页面。这也允许在页面加载之间连续播放音频。我遇到的问题是，如果用户在去其他地方后返回到轨道（它仍然会在后台播放），那么暂停按钮就会变成一个播放按钮。因此，为了解决这个问题，我将暂停/播放功能放入 timeupdate 中，以便它更新。

$(song).on('timeupdate', function() {
    //Bind body_player controls to timeupdate so updates throughout pageloads. 
     if (song.paused){
         $('.main_controls').replaceWith('<div class="main_controls" id ="play" data-t_id="' + t_id +'"></div>'); //change main controls also
         $(".body_container*[data-t_id='" + t_id +"'] .player .controls").replaceWith('<div class="controls" id="play" title="Play"></div>');   
      }
      else {
          $('.main_controls').replaceWith('<div class="main_controls" id ="pause" data-t_id="' + t_id +'"></div>'); //change main controls also
          $(".body_container*[data-t_id='" + t_id +"'] .player .controls").replaceWith('<div class="controls" id="pause" title="Pause"></div>'); 
      }
}

如您所见，这会导致问题，因为按钮会不断更新。因此，有时如果用户单击按钮，则不会发生任何事情，因为它当时正在更新。除此之外，更新 DOM 的效率非常低。所以我想出了这个：

var i = 0;
$(song).on('timeupdate', function() {
    i++
    //Bind body_player controls to timeupdate so updates throughout pageloads. 
    if (song.paused){
    i = 0;
        $('.main_controls').replaceWith('<div class="main_controls" id ="play" data-t_id="' + t_id +'"></div>'); //change main controls also
        $(".body_container*[data-t_id='" + t_id +"'] .player .controls").replaceWith('<div class="controls" id="play" title="Play"></div>');   
    }
    else {
        if (i === 1){
            $('.main_controls').replaceWith('<div class="main_controls" id ="pause" data-t_id="' + t_id +'"></div>'); //change main controls also
            $(".body_container*[data-t_id='" + t_id +"'] .player .controls").replaceWith('<div class="controls" id="pause" title="Pause"></div>'); 
          }
     }
}

我希望你能看到它是如何工作的，它相当简单。i使用 timeupdate 更新，如果i===1则按钮将被更改。i === 0当歌曲开始播放时，您不能使用i === 10。如果是，i === 0则按钮将永远不会更新。

我现在遇到的问题(if song.p...){是无法正常运行。似乎添加i++的内容与 timeupdate 混淆了，因此在用户暂停曲目后时间不会更新。我不完全确定这里发生了什么，但我认为这就是正在发生的事情。timeupdate 函数在轨道暂停或播放时不会改变，因此整个函数不会运行。

注意：作为旁注，我刚刚删除的 timeupdate 函数中有更多代码，因为它与手头的事情几乎没有关系。如果我认为它会以任何方式影响这一点，我会添加它。

4

0 回答 0