1

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

<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 秒后（考虑到应用程序的目标使用情况，这就足够了），停止/隐藏微调器 - 也就是说，允许提交表单，然后显示微调器，然后隐藏它（虽然此功能以不同的顺序执行 - 显示微调器，然后提交表单）？

4

1 回答 1

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
});
于 2013-03-18T20:05:20.210 回答