Question

我尝试设置每五秒钟加载一次的Feed。当你只是坐在网站上时，我已经让第一部分工作了。我现在的下一个问题是它突然弹出，所以我试图让它看起来更顺畅。

function FinalizeFeed(result) {
    $(".useractivity").html(result);
}
function LoadFeedData() {
    var dataString = "action=loaduserfeed";
    $.ajax({
        type: "POST",
        url: "/core/functions.d/feed.php",
        data: dataString,
        cache: false,
        success: function(result){
            $(".post-loading").html('<center><i class="fa fa-circle-o-notch fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span></center>').fadeOut("slow");
            setTimeout(FinalizeFeed(result), 2000);
        }

    });
}

所以我的想法是创建FinalizeFeed函数。工作正常，但仍然弹出。如果我没有在.post-loading.html下添加Finalize函数，微调器显示出来并且看起来真的很好，但是在使用setTimeout加载新数据时我真的没有帮助，我认为它会等待，但是锭床工人甚至都没有出现。有没有人看到这个代码的问题是什么？

Answer 1

setTimeout(FinalizeFeed(result), 2000);

此调用FinalizeFeed(result)然后将该函数调用的结果传递给setTimeout。

你想要这个：

setTimeout(function() {
    FinalizeFeed(result)
}, 2000);

Answer 2

不要推迟result回复。即使是2秒。您实际上并不想要微调器和加载器显示，因为这表示缓慢加载的数据。如果/core/functions.d/feed.php触发并在100毫秒内发送响应，为什么还要再等1900毫秒来显示它？

通过将微调器/加载器添加到beforeSend，微调器将在初始$.ajax()调用时触发，并在操作完成后删除。

因此，在删除setTimeout()时，一旦可用，就会返回并显示数据。操作为complete后，将移除微调器。

除此之外：我常常看到人们推迟回应只是为了让华丽的旋转器显示出来。用户需要数据，而不是微调器。

function LoadFeedData() {
    var dataString = "action=loaduserfeed";
    $.ajax({
        beforeSend: function() {
            $(".post-loading").html('<center><i class="fa fa-circle-o-notch fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span></center>').fadeOut("slow");
        },
        type: "POST",
        url: "/core/functions.d/feed.php",
        data: dataString,
        cache: false,
        success: function(result) {
            $(".useractivity").html(result);
        },
        complete: function() {
            $(".post-loading").html('');
        }
    });
}

删除FinalizeFeed()您现在正在简化您的代码。该功能紧密耦合到您的$.ajax()成功函数中，因此它实际上不可重用，因此不值得创建。

Answer 3

这样的事情怎么样：

 function FinalizeFeed(result) {
   $(".useractivity").html(result);
 }

 function LoadFeedData() {
   var dataString = "action=loaduserfeed";
   $.ajax({
     type: "POST",
     url: "/core/functions.d/feed.php",
     data: dataString,
     cache: false,
     beforeSend: function() {
      $(".post-loading").html('<center><i class="fa fa-circle-o-notch fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span></center>');
     },
     success: function(result) {
       $(".post-loading").fadeOut("slow");
       setTimeout(function(){
         FinalizeFeed(result)
       }, 2000);
     }

   });
 }

所以在发送之前显示微调器，然后在成功时隐藏微调器并使用setTimeout调用该函数。

否则，在您的代码中，您将成功显示微调器并将其淡出，因此如果请求需要很长时间，它将不会显示，直到完成为止。

Answer 4

在finalizeFeed（）中移动fadeOut，并使用匿名函数包装超时代码，以便稍后执行。

 function FinalizeFeed(result) {
$(".post-loading").fadeOut("slow");
    $(".useractivity").html(result);
  }
  function LoadFeedData() {
  var dataString = "action=loaduserfeed";
     $.ajax({
            type: "POST",
            url: "/core/functions.d/feed.php",
            data: dataString,
            cache: false,
            success: function(result){
                $(".post-loading").html('<center><i class="fa fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span></center>');
                setTimeout(function (){FinalizeFeed(result)}, 2000);
            }

            });
   }

Answer 5

您希望每5秒更新一次数据。你可以这样做：

//function FinalizeFeed(result) { //no need
//    $(".useractivity").html(result);
//}
function LoadFeedData() {
    $(".useractivity").fadeOut("slow");
    $(".post-loading")
        .html('<center><i class="fa fa-circle-o-notch fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span></center>')
        .fadeIn("slow");
    var dataString = "action=loaduserfeed";
    $.ajax({
        type: "POST",
        url: "/core/functions.d/feed.php",
        data: dataString,
        //cache: false, //this is redundant. post request never cache
        success: function(result){
            $(".useractivity").html(result).fadeIn("slow");
            $(".post-loading").fadeOut("slow");
            //setTimeout(FinalizeFeed(result), 2000);//no need; bad syntax
            //"FinalizeFeed(result)" or function(){FinalizeFeed(result);} expected
            //New cycle starts after 5 sec after data received. 
            //Response time is unpredictable.
            setTimeout(LoadFeedData, 5000); 
        }

    });
}

使Jquery函数等待前一个函数

5 个答案: