等到事件发生后再在 JQuery 中执行任何其他操作

Posted 2023-02-25

【中文标题】等到事件发生后再在 JQuery 中执行任何其他操作

【英文标题】：Wait until an event happens before doing anything else in JQuery

【发布时间】：2020-01-30 00:30:12

【问题描述】：

我问过一个类似的问题，但很快就发现它不在主题范围内，所以让我解释一下我的问题。

我有 5 个音频。目标是每个音频播放 3 次。

代码如下：

$('audio').each(function(index)
    playAudio(this.player, index);
);

function playAudio(audio, index)
        var loop = 3;

        // This will loop 3 times
        for(var i = 0; i < loop; i++)
            audio.play();

            $('.worship-items audio').eq(index).on('ended', function()
                // When the song has ended, set the progress(current time) back to 0 seconds.
                audio.setCurrentTime(-1);
                audio.pause();
            );
        
    

我遇到的问题是控制台给了我这个错误：

(15) 未捕获（承诺中）DOMException：play() 请求被对 pause() 的调用中断。

有人可以帮我解决这个问题吗？

编辑：我被要求添加 html，所以这里是：

<audio src="audio1.mp3"></audio>
<audio src="audio2.mp3"></audio>
<audio src="audio3.mp3"></audio>
<audio src="audio4.mp3"></audio>
<audio src="audio5.mp3"></audio>

【问题讨论】：

index 参数是干什么用的？

可以发html吗？

@Barmar index 参数是这样我可以找到特定的音频。注意：我也在使用 MediaPlayer.js 插件。我还注意到我忘了添加eq。我会进行编辑。

在我的回答中，我只是将 DOM 元素传递给函数，而不是索引。当您拥有元素本身时，无需使用选择器。

@Scaramouche 我添加了 html

【参考方案1】：

for 循环同步运行。您需要在 ended 处理程序中重复调用。

同样，.each() 同步运行。只有当上一个音频的所有重复都结束时，您才需要开始下一个音频。

function playAudio(audios, index, loop, counter) 
    if (counter >= loop) 
        index++;
        if (index >= audios.length) 
            return;
        
        playAudio(audios, index, loop, 0);
    
    let audio = audios[index];
    audio.player.play();
    $(audio).off("ended").on("ended", function() 
        this.player.setCurrentTime(-1);
        playAudio(this, index, loop, counter + 1);
    );
);

playAudio($(".worship-items audio"), 0, 3, 0);

【讨论】：

那么如何防止它同时播放 5 个音频呢？

好的，我去测试一下

非常感谢，我研究了 3 天没有成功，你救了我一整个星期！