使 Jquery 函数等待上一个函数答案

【问题标题】：Make Jquery function wait for previous function使 Jquery 函数等待上一个函数
【发布时间】：2016-05-27 22:54:36
【问题描述】：

我正在尝试设置每五秒加载一次的供稿。当您只是坐在站点上时，我已经完成了第一部分的工作。我现在的下一个问题是它只是突然弹出，所以我试图让它看起来更平滑。

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 我认为它会等待，但微调器不会甚至出现。有人看到这段代码有什么问题吗？

【问题讨论】：

尝试将微调器添加到 beforeSend: function() { // spinner code here } 然后 wipe 它post success 函数，即。超时后或complete: function() {}
创建函数 (FinalizeFeed()) 真的毫无意义。 setTimeout(function() { $(".useractivity").html(result); }, 2000); 就足够了。函数是为了可重用的目的。这似乎是一个一次性案例。

标签： javascript jquery

【解决方案1】：

setTimeout(FinalizeFeed(result), 2000);

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

你想要这个：

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

【讨论】：

好吧；仍然没有显示微调器，所以不确定发生了什么。

【解决方案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() 成功函数紧密耦合，因此它实际上不可重用，因此不值得创建。

【讨论】：

谢谢。运行它的更好方法，我的数据在更新时看起来更干净。

【解决方案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 调用函数。

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

【讨论】：

【解决方案4】：

将 fadeOut 移到 finalizeFeed() 中，并使用匿名函数包装您的超时代码，以便稍后执行。

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

            });
   }

【讨论】：

您需要修复对setTimeout的调用。

【解决方案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); 
        }

    });
}

【讨论】：