setTimeOut在函数中没有按预期工作

Question

由于某种原因，我的函数中的setTimeOut变量不起作用。我尝试了一些不同的策略，但没有一个有效。基本上，我试图在播放音频之前设置延迟。下面是我的JS和HTML代码。

function song(musicfile) {
  $('#result').html("<audio autoplay=\"true\"><source src=" + musicfile + " type=\"audio/mpeg\" /></audio>");
  setTimeout(song, 10000);
}

<img class="playbutton1 center-block" src="play.png" onclick="song('pretender.m4a');">

Answer 1

当然没有延迟。有人单击图像，您立即注入<audio>元素，然后设置延迟。

您需要的是setTimeout(function_that_injects_the_element, 10000)。

function song(musicfile) {
  setTimeout(function() {
    $('#result').html("<audio autoplay=\"true\"><source src=" + musicfile + " type=\"audio/mpeg\" /></audio>");
  }, 10000);
}

我可能会建议删除所有现有的音频元素，或者至少在可能的情况下停止它们。

Answer 2

jquery调用应该在setTimeout

中

function song(musicfile) {

  setTimeout(function(){$('#result').html("<audio autoplay=\"true\"><source src=" + musicfile + " type=\"audio/mpeg\" /></audio>");}, 10000);
}