javascript - JS setTimeout 未在 onclick 上触发

Question

我一直在我的网站上使用它作为里程表 http://github.hubspot.com/odometer/ ，这很棒，但我似乎无法让它能够处理按钮的单击操作。它仅在页面加载时起作用。我尝试添加其他功能，例如简单的 window.alert 警报将起作用，但它不会启动 setTimeOUt

这是我最新的代码:

<script>

function playSound() {

    setTimeout(function(){

    var audio = new Audio('sounds/machine-002-short.mp3');
    var audio2 = new Audio('sounds/coin-drop-4.mp3');

    audio.play();
    audio.volume = 0.65;
    audio.currentTime = 0.90;

    audio2.pause();
    audio.addEventListener("ended", function() {
    audio2.play();
    audio2.volume = 1.5;

        }); // event listener

    $('.odometer').html(<?php echo $Display;?>);
  }, 1000);  
} 
</script>

和按钮:

<button id="submit" type="submit" type="button" name="roll" onclick="playSound();">Start</button>

如果我只是添加一个 winow.alert 它就不能在这个设置的超时时间内工作，我对 JS 非常缺乏经验，所以我确信这很简单

Answer 1

• 按钮可以提交(type=submit - 默认)或不提交(type=button)
• 如果需要提交表单，则必须在 setTimeout 运行完毕后才能提交
• 如果文本区域是.odometer，请使用.val() 而不是.html()
• 也许您不想提交表单，而是在操作内容中使用 AJAX。像这样:

function getContent() {
  $.get($("#form1").prop("action", {data:$("#odometer").val()},function(data) {
     $('#odometer').val(data); // here we replace the $Display with what is returned
  });
}
function playSound() {

  setTimeout(function() {

    var audio = new Audio('sounds/machine-002-short.mp3');
    var audio2 = new Audio('sounds/coin-drop-4.mp3');

    audio.play();
    audio.volume = 0.65;
    audio.currentTime = 0.90;

    audio2.pause();
    audio.addEventListener("ended", function() {
      audio2.play();
      audio2.volume = 1.5;
      getContent();
    }); // event listener

    $('#odometer').val(<?php echo $Display;?>);
  }, 1000);
}

<form id="form1" action="somefile.php">
  <textarea id="odometer"></textarea>
  <button type="button" id="but">Start</button>
</form>