javascript - 在 AJAX 返回的元素仍然可见时暂停 HTML5 音频

Question

我有一个 HTML 页面，它轮询连接到数据库的 PHP 脚本以查看是否收到任何新项目（新项目标记为NEW），如果有，则将一个元素#audio发送到浏览器，以便播放声音：

$(document).ajaxComplete(function() {
if ($('#audio').length) {
$('#sound').get(0).play();
}

});

它#sound位于页面的 HTML 中，因此如果返回 #audio 并带有标记为 NEW 的项目，则播放声音。

轮询会在特定时间范围内返回所有项目，因此可以返回旧项目和新#audio项目，这就是为什么如果有一个标记为 NEW 我附上一个来发出声音。

播放声音后，用户按下按钮以使用 update.php 将数据库中的 NEW 状态更新为 OLD，同时暂停声音。

$('body').on('click','.acc',function() {
    $('#sound').get(0).pause();
    var itemID = $(this).data("id");
{
        $.post("update.php",
{
    id: itemID
},);
    }
});

现在我遇到的问题是，虽然这有效，但有时服务器更新的延迟（从新到旧）会导致声音播放，因为它#audio仍然存在。

我也尝试在单击时隐藏元素，但仍然具有相同的效果，即#audio在更新过程中仍会返回。

我需要做什么，我可以在服务器仍在处理时使用不同的技术来停止声音吗？

如果不让我知道，希望这是有道理的，我会进一步解释并提前致谢。

标签： javascriptjqueryajaxhtml5-audio