使用JavaScript提交动画超时

Question

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

<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
});
});