在提交按钮被按下后延迟jQuery Ajax加载3秒

Delay jQuery Ajax loader for 3 seconds after submit button is pushed

本文关键字：jQuery 延迟 Ajax 加载 3秒 提交 按钮      更新时间：2023-09-26

我使用一个简单的jQuery来显示在SUBMIT按钮被按下后用CSS创建的动画div。我的问题是，当服务器响应很快时，DIV只显示几毫秒。我想显示它至少3秒，不管服务器响应是快还是慢。

HTML:

<form class="search_cars" action="http://www.domain.com/searchresults" method="get">
    <label>
        <select name="model">
            <option value="" selected="selected">Select Make</option>
            <option value="Acura">Acura</option>
            <option value="...">...</option>
        </select>
    </label>
    <label>
        <select name="type">
            <option value="" selected="selected">All Models</option>
            <option value="...">..models script...</option>
        </select>
    </label>
    <label><input name="zip" type="tel" maxlength="5" id="zip" placeholder="zip code" /></label>
    <label><input name="submit" type="submit" value="search" class="search_button" /></label>
</form>
jQUERY:

$(".search_button").click(function(e) {
    $('#loadingProgressG').show();
    $.ajax({
        success: function(data) {
            $('#loadingProgressG').hide();
        },
        error: function() {
            $('#loadingProgressG').hide();
        }
    });
});

查看StackOverflow的其他线程，我已经尝试了这个可能的解决方案，更改:

$('#loadingProgressG').hide();


$('#loadingProgressG').delay(3000).hide(400);

但它没有工作。还尝试更改同一行:

setTimeout(function() {
    $('#loadingProgressG').hide();
}, 3000);

和什么都没有。最有可能的是我做错了什么，我不是jQuery专家。任何帮助或建议都是感激的。

**我刚刚注意到，使用setTimeout工作的时间设置，只有当一些表单验证停止进程

您的示例应该可以工作。我唯一的猜测是，由于您将提交按钮绑定到表单，因此它正在处理表单，而不是在AJAX完成后成功运行该函数。

为了防止表单被处理，您希望preventDefault()然后运行您想要运行的。

EDIT:假设您需要表单实际处理，您将在3000 setTimeout之后提交表单。像这样:

<

JSFiddle:演示/h2>

对于提交按钮，使用<button>代替:

<label><button class="search_button">search</button></label>

然后对JavaScript执行以下操作:

$(".search_cars").submit(function (e) {
    e.preventDefault();
    var form = this;
    $("#loadingProgressG").show();
    setTimeout(function () {
        $("#loadingProgressG").hide();
        form.submit();
    }, 3000); // in milliseconds
});

你需要包装$('#loadingProgressG').hide();输入settimeout函数

的例子:

setTimeout(function() {
$('#loadingProgressG').hide();
}, 3000)

页面在JavaScript结束前加载。

您必须阻止默认行为。在e对象上像这样使用preventDefault()函数:

$(".search_button").click(function(e) {
    e.preventDefault();
    $.ajax({
        success: function(data) {
            $('#loadingProgressG').hide();
            $(".search_cars").submit();
        },
        error: function() {
            $('#loadingProgressG').hide();
        }
    });
});
相关文章：