显示加载器动画 2-3 秒，然后处理 - .ajaxStart 和 .ajaxStop

Question

如何显示加载器动画 3 秒然后处理 process.php？ 我已经在 ajaxStart 块和 ajaxStop 块中使用 setTimeout() 方法进行了尝试，但这不起作用。

<script type="text/javascript">
$(document).ready(function(){

$('#loading')
.hide()  // hide it initially
.ajaxStart(function() {
    $(this).show();
})
.ajaxStop(function() {
    $(this).hide();
});

    $("#myform").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Please let us know who you are.",
            email: "A valid email will help us get in touch with you.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {

            $('#results').html(data);
            });
        }
    });
});
</script>

这是表格：

<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value=""/>  
    <br>
<!-- The Email form field -->
    <label for="email" id="email_label">Email</label>  
    <input type="text" name="email" id="email" size="30" value=""/> 
    <br>
<!-- The Submit button -->
    <input type="submit" name="submit" value="Submit"> 
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>

<div id="loading">Loading</div>

Answer 1

这是我的一个脚本的摘要。

$(document).ready(function() {
    $.ajaxSetup ({  
        cache: false  
    });  
    $("#header-ajaxload").ajaxStart(function() {
        $(this).html(ajax_load);
    });
$("#header-ajaxload").ajaxStop(function() {
        $(this).html('');
    });
    $("#header-ajaxload").ajaxError(function() {
        $(this).text( "Triggered ajaxError handler." );
    });
});

var ajax_load = "<img src='home/img/ajax_load.gif' alt='loading...' />";