ajax加载程序gif setinterval

Question

我试图显示加载图像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);
        }
    });

Answer 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);
    }
});

Answer 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);

Answer 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将使内部的每个代码在指定的时间间隔后运行。