使用 JavaScript 超时提交动画

Question

我有一个提交按钮和一个 JavaScript。单击按钮会将状态从活动状态更改为非活动状态，并显示微调动画。我想在脚本中添加一个 超时函数 。该按钮应停止动画并在 3000 毫秒后返回活动状态并再次显示正常的提交按钮。这是我的代码：

 <button type="submit" class="btn btn-primary btn-lg" value="submit" id="ajax-form-button">Submit</button>

$(document).ready(function() {
 $("#ajax-form").submit(function(e) {
   // disable button
   $('#ajax-form-button').prop("disabled", true);
   // add spinner to button
   $('#ajax-form-button').html(
   `<i class="spinner-border spinner-border-sm mb-1"></i> Bitte warten...`
   );            
 });
});

Answer 1

window.setTimeout() 就是您要找的。

$(document).ready(function() {
  $("#ajax-form").submit(function(e) {
    // disable button
    $('#ajax-form-button').prop("disabled", true);
    // add spinner to button
    $('#ajax-form-button').html(
      `<i class="spinner-border spinner-border-sm mb-1"></i> Bitte warten...`
    );

    window.setTimeout(() => {
      $('#ajax-form-button').prop("disabled", false); //re-enable button
      $('#ajax-form-button').html("Submit"); // oder "Absenden"  
    }, 3000) // run that function after 3 s

  });
});

使用 JavaScript 超时提交动画

Timeout a submit animation with JavaScript

javascript

animation

timeout

submit

button