0

我只是试图延迟表单提交并为用户提供某种正在发生的动作的感觉，而不仅仅是即时表单提交。下面链接的 jsfiddle 准确地显示了我正在尝试做的事情（减去我想要为其提供消息的客户端中发生的操作）。

简而言之，我想使用 setTimeout 作为一种将表单提交延迟 N 秒的方法，例如

// display message indicating we're doing something
$("#container").html("<p>Processing...</p>");

setTimeout(function () {
    // display message indicating we're ready to submit the form
    $("#container").html("<p>Submitting...</p>");
    // trigger form submit action
    form.submit();
    return true; // needed?
}, 2000);

正如您在此处看到的，我将“提交...”消息和实际的表单提交触发器包装在 setTimeout 中。这一切都在一个更大的$("#theForm").submit()包装中。

这要么完全失败（挂起），要么在表单通过但 POST 失败的地方执行某种伪“部分提交”。

我不同意这个想法......如果有另一种延迟表单提交几秒钟以提高用户体验的方法，我想知道。

http://jsfiddle.net/t4tqy/

测试的浏览器：Chrome、IE 8、Windows 下的 FF 12……这就是我可以访问 ATM 的全部内容。

4

1 回答 1

1

尽管您为什么要引起延迟而不是消除任何发生的...

使用：

<div id="formMessage"></div>
<div id="formContainer">

和：

#formMessage {
    display: none;
}

并添加/编辑：

$("#formContainer").hide();
$("#formMessage").html("Processing...").show();

....

$("#formMessage").html("Submitting....");

它可以工作，就像在这个（公认的迂回）演示中一样，在尝试提交之前，您不会form从元素中删除 。#formContainer

http://jsfiddle.net/userdude/t4tqy/1/

现在，我可能会建议一些改进，例如使用缓存而不是多次调用同一元素选择器等。另外，您还可以#formMessage仅在需要时创建元素，而不是在源代码中添加不必要的标记。

$(function () {
    var $email = $("#emailAddr"),
        $form = $("#emailForm"),
        $container = $('#formContainer'),
        $message = $('<div id="formMessage">');

    $email.val('bogus.user@email.cc');

    $form.submit(function (ev) {
        ev.preventDefault();

        var form = this,
            ea = $email.val(),
            allowSubmit = false;

        // cheap email validation
        if (ea.length !== 0 && ea.indexOf("@") !== -1) {
            allowSubmit = true;
        }

        if (allowSubmit === true) {
            // indicate action of some sort
            $container.hide().before($message);
            $message.html("Processing...").show();

            setTimeout(function () {
                // indicate we're submitting form
                $message.html("Submitting...");
                // engage
                form.submit();
                return true;
            }, 2000);

        } else {
            alert("form not ok, not allowing submission...");
        }  
    });
});

http://jsfiddle.net/userdude/t4tqy/3/

于 2012-06-08T16:05:51.747 回答