javascript - 延迟按钮提交 Javascript

Question

我正在尝试在 javascript 中的提交按钮上添加延迟。但它似乎只是卡住，点击后不再执行任何操作。有人有解释吗？

function Progress() {
   var button = document.getElementById("Button");
   var form = document.getElementById("new_video")

    form.onsubmit = function() {
      return false;
    }
    button.onclick = function() {
     setTimeout(function() {
        form.submit();
     }, 2000);
       return false;
    }
  }

<input type="submit" name="commit" value="Upload" class="btn btn btn-primary" onclick="Progress()" id="Button" data-disable-with="Upload" disabled="">

Answer 1

// Cache your Form Elements
const EL_form = document.querySelector("#myForm");
const EL_formSubmitBtn = EL_form.querySelector("#Button");

const Progress = (evt) => {
  evt.preventDefault(); // Prevent Browser Submit action
  
  EL_formSubmitBtn.disabled = true; // Disable the submit button
  
  setTimeout(function() {
    EL_form.submit(); // Or do AJAX stuff here
    EL_formSubmitBtn.disabled = false; // Enable the submit button
  }, 2000);
};


// Use Element.addEventListener instead of inline JS
// Don't attach handlers to button, rather use the Form "submit" Event:
EL_form.addEventListener("submit", Progress);

<form id="myForm" action="demo.php">
  <input id="Button" type="submit" value="Upload" class="btn btn btn-primary">
</form>

PS:不要将实际上不返回对象或根据定义不是类的常规函数​​的名称大写，而是使用 progress 作为您的函数名称。或者更确切地说，它实际上是一个 formSubmitHandler