javascript - 按下提交按钮后延迟 jQuery Ajax 加载器 3 秒

Question

我正在使用一个简单的 jQuery 来显示在按下提交按钮后使用 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>

j查询:

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

查看 StackOverflow 上的其他线程，我已经尝试过 this可能的解决方案，改变:

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

通过

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

但是没有用。 Also tried通过以下方式更改同一行:

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

什么也没有。最有可能是我做错了什么，我不是 jQuery 大师。感谢您提供任何帮助或建议。

** 我刚刚注意到使用 setTimeout 仅在某些表单验证停止该过程时适用于时间设置。

Answer 1

您的示例应该有效。我唯一的猜测是，因为您将提交按钮绑定(bind)到表单，所以它正在处理表单，而不是在 AJAX 完成后成功运行函数。

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

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

JSFiddle:DEMO

对于提交按钮，使用 <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
});