Question

每当用户提交表单时，我都会有一个显示“等待”图像的小部件，使用以下代码实现：

<div id="shading"></div>
<div id="spinner-wrapper">
    <div id="spinner-target"></div>
</div>


$("form").submit(function() {
    $("#spinner-wrapper").css({"visibility": "visible", "display": "block" });
    $("#shading").css({"z-index": "97"});
    var target = document.getElementById('spinner-target');
    var spinner = new Spinner(opts).spin(target);       
});

这具有使屏幕变灰，显示微调器的预期效果，然后当表单完成提交时，用户将被定向到目标页面。

但是，有时提交表单时没有重定向 - 特别是，如果用户选择要下载文件，我会返回文件本身，并终止进程以阻止重定向发生。当发生这种情况时，微调器仍然在前台，阻止用户与站点交互 - 而不是期望的行为。

我怎么能以某种方式说X秒后（考虑到应用程序的目标用法，这就足够了），停止/隐藏微调器 - 也就是说，允许提交表单，然后显示微调器，然后隐藏它（虽然这个函数以不同的顺序执行 - 显示微调器，然后提交表单）？

Answer 1

使用window.setTimeout（）：

$("form").submit(function() {
    $("#spinner-wrapper").css({"visibility": "visible", "display": "block" });
    $("#shading").css({"z-index": "97"});
    var target = document.getElementById('spinner-target');
    var spinner = new Spinner(opts).spin(target);       

    window.setTimeout(function() {
      //Hide the spinner here
    }, 5000); //Wait five seconds before running the callback function
});

使用javascript在后台运行任务

1 个答案: