Question

我正在使用一个简单的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的其他主题，我已尝试this可能的解决方案，更改：

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

通过

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

但它没有用。 Also tried更改同一行：

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

没什么。最可能的是我做错了什么，我不是jQuery大师。任何帮助或建议表示赞赏。

**我刚刚注意到，使用 setTimeout 可以在设置的时间内工作，只有在某些表单验证停止该过程时才会使用。

Answer 1

你的例子应该有用。我唯一的猜测是，由于你将提交按钮绑定到一个表单，它处理表单而不是在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
});

Answer 2

你想要包装$（'＃loadingProgressG'）。hide（）;进入settimeout函数。

示例：

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

Answer 3

页面在JavaScript结束之前加载。

您必须阻止默认行为。在您的e对象上使用函数preventDefault（），如下所示：

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

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

3 个答案:

JSFiddle：DEMO