如何将块UI与setTimeout一起使用，并在表单提交时防止默认

以下是我正在做的事情以及原因：

我有一个表单，它用不同的脚本进行了预处理根据用户输入
通常脚本在不到几秒钟的时间内执行，但是一个脚本可能需要大约 10 秒，具体取决于服务器负载等。
现在我想实现这个"弹出窗口"，其中包含："请稍候而..."我为此使用 blockUI - 用于实现的简单插件这。
但是，用于快速脚本执行的blockUI是相当愚蠢的，因为用户只会看到弹出窗口在屏幕上闪烁。
因此，我想为它设置超时，例如 1000 毫秒，以便 blockUI即使表单已经完成，也会显示
到目前为止，我已经尝试了很多东西，现在我基本上使用防止默认取消表单提交设置超时，但我之后无法完成表格提交。

编辑：发现，由于javascript是异步语言，没有preventDefault(停止表单提交(setTimeout永远不会启动，并且操作立即返回true。

<form method="post" name="my_form" id="my_form" enctype="multipart/form-data">
    <input type="submit" name="my_submit" id="my_submit" value="Submit" />
    <div id="form_loading_message" style="display:none;"> 
        <h1>Please wait, page is loading...</h1> 
    </div>
</form>
$('#my_submit').click(function(event) {
    $.blockUI({
        message: $('#form_loading_message')
    });
    var form = $('#my_form');
    event.preventDefault();
    setTimeout(function () {
        form.unbind('submit').submit();
        $.unblockUI();
    }, 1000);
});

如果您有更好的主意，请，我也愿意接受其他建议......

不熟悉blockUI，但是...以下是我会怎么做：

<html>
    <head>
        <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#my_submit').click(function() {
                    $('#form_loading_message').show();
                    setTimeout('submitForm()', 1000);
                });
            });
            function submitForm(){
                $('#my_form').submit();
            }
        </script>
</head>
<body>
<form method="post" name="my_form" id="my_form" action="google.com" enctype="multipart/form-data">
    <input type="button" name="my_submit" id="my_submit" value="Submit" />
    <div id="form_loading_message" style="display:none;"> 
        <h1>Please wait, page is loading...</h1> 
    </div>
</form>
</body>
</html>

由于我没有找到如何使用javascript执行此操作，因此在将用户重定向到另一个页面之前，我使用了php sleep((-function。自然需要删除 PreventDefault，因为它阻止了提交操作。该解决方案为我解决了用例：只是向用户显示页面正在加载的消息。

相关内容

最新更新

热门标签：