如何延迟提交

如何解决如何延迟提交

如何延迟提交直到音频文件完成，因为当提交事件触发时，页面刷新而不播放声音文件 我试过了，但它不起作用。

<form action="/game1/" method="POST" onsubmit="checkAnswer()">
        {% csrf_token %}
        <input type="hidden" name="UserSorce" id="us" >
        <button type="submit" class="btn btn-primary btn-circle btn-xl">
          Check
        </button>
      </form>

function checkAnswer()
  {
    let tmp=document.getElementById("answer").innerText;
    if(correctAns==tmp)
    { 
        document.getElementById("result").src=picCorrect;
        document.getElementById("result").style.display="block";
        var audio = new Audio(soundCorrect);
        audio.play();
        audio.onended = function () {
          return true;
        }
    }else{
        document.getElementById("result").src=picIncorrect;
        document.getElementById("result").style.display="block";
        var audio = new Audio(soundIncorrect);
        audio.play();  
    }
  }

解决方法

您几乎拥有所需的所有东西。这里的技巧是不要使用表单的提交按钮触发提交。而是添加一个简单的 html 按钮，它调用 checkAnswer()。

在 checkAnswer() 函数中，您已经在监听音频的 onended 事件。如果发生这种情况，您最终可以使用它的 submit() 函数提交表单。

有点像这样：

<form id="myForm" action="/game1/" method="POST">
  <input type="hidden" name="UserSorce" id="us">
</form>
<button onclick="checkAnswer()">
  Check
</button>

和

function checkAnswer() {
  let tmp = document.getElementById("answer").innerText;
  if (correctAns == tmp) {
    document.getElementById("result").src = picCorrect;
    document.getElementById("result").style.display = "block";
    var audio = new Audio(soundCorrect);
    audio.onended = function() {
      document.getElementById("myForm").submit();
    }
    audio.play();

  } else {
    document.getElementById("result").src = picIncorrect;
    document.getElementById("result").style.display = "block";
    var audio = new Audio(soundIncorrect);
    audio.play();
  }
}

,

您好，请尝试在提交事件上处理 preventDefault：

function checkAnswer(e)
  {

    e.preventDefault();

    let tmp=document.getElementById("answer").innerText;
    if(correctAns==tmp)
    { 
        document.getElementById("result").src=picCorrect;
        document.getElementById("result").style.display="block";
        var audio = new Audio(soundCorrect);
        audio.play();
        audio.onended = function () {
          return true;
        }
    }else{
        document.getElementById("result").src=picIncorrect;
        document.getElementById("result").style.display="block";
        var audio = new Audio(soundIncorrect);
        audio.play();  
    }
  }