ajax 加载器 gif 设置间隔答案

【问题标题】：ajax loader gif setintervalajax 加载器 gif 设置间隔
【发布时间】：2014-10-07 15:14:02
【问题描述】：

我试图显示加载图像 3 秒，然后加载 ajax 数据。所以我尝试添加这是之前的功能，但它不起作用，它的加载速度很快，我需要它，所以加载器图像将显示 3 秒

这是我的 js

$.ajax({
        url: "ajax/change_skin.php",
        type: "GET",
        data: {skin:skin},
        before:function(){
            setInterval(function(){
                $('#loader').show();
            }, 3000);
        },
        complete:function(){
            $('#loader').hide();
        },
        success:function(data){
            console.log(date);
        }
    });

【问题讨论】：

所以你希望加载器显示至少 3 秒...如果负载更长，显示更长时间？
你为什么要让用户多等 3 秒才能看到你的旋转图像。（这不是微调器的使用方式）
添加了一个替代方案，可以提供你想要的（加载过程中最少 3 秒微调器，但不会延迟加载）。

标签： jquery ajax setinterval loader

【解决方案1】：

在进行 ajax 调用之前显示加载器。

$("#loader").show();

setTimeout(function() {
    $.ajax({
        url: "ajax/change_skin.php",
        type: "GET",
        data: {skin:skin},
        complete:function(){
            $('#loader').hide();
        },
        success:function(data){
            console.log(date);
        }
    });
}, 3000);

编辑：我会避免让用户在实际进行 ajax 调用之前等待任何时间才能看到您的微调器/加载器动画。

微调器用于表示实际的加载和处理。在这种情况下，您错误地表示了您可以处理请求的速度并将您的慢速投射到用户身上。

您应该这样做的方式是：

$("#loader").show();

$.ajax({
    url: "ajax/change_skin.php",
    type: "GET",
    data: {skin:skin},
    complete:function(){
        $('#loader').hide();
    },
    success:function(data){
        console.log(date);
    }
});

【讨论】：

您只是在使用 setTimeout 延迟加载。这是一个可怕的选择。 @Control Freak：不是他们现在拥有的方式！
你是对的。我不会为我自己的项目这样做。既然 OP 想让用户看 3 秒，那你就是这样做的。
@aelieo 没有理由让用户等待 3 秒额外的 ajax 加载。请向 OP 解释一下，他们可能不明白这样做是没有意义的。
@ControlFreak 我编辑了我的答案以反映应该如何完成。感谢您指出这一点。
添加了一个不会延迟加载的替代方案，但仍会根据需要为微调器提供至少 3 秒的时间。

【解决方案2】：

如果您不想为加载（仅对微调器）添加不必要的 3 秒延迟，请使用 ajax 延迟结果：

// Show the spinner
$("#loader").show();

// Do the ajax load
var deferred = $.ajax({
    url: "ajax/change_skin.php",
    type: "GET",
    data: {skin:skin},
    success:function(data){
        console.log(date);
    }
});

// Hide after 3 seconds... and then only if/when ajax completes
setTimeout(function() {
    deferred.then(function(){
       $('#loader').hide();
    });
}, 3000);

【讨论】：

【解决方案3】：

你做错了。你应该这样做：

$('#loader').show();
setInterval(function(){
    $.ajax({
    url: "ajax/change_skin.php",
    type: "GET",
    data: {skin:skin},
        complete:function(){
           $('#loader').hide();
        },
        success:function(data){
            console.log(date);
        }
    });
}, 3000);

SetInterval 将使里面的每个代码在指定的时间间隔之后运行。

【讨论】：

再次，您无缘无故地延迟了加载 3 秒。请参阅使用 ajax 延迟值的替代方法。