Make Jquery function wait for previous function

Question

I'm trying to set up a feed that loads every five seconds. I've got the first part to work where it loads while you're just sitting on the site. My next issue now is that it just pops up suddenly, so I'm trying to get it to look smoother.

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

So my thought was create the FinalizeFeed function. Works fine, but still just pops up. If I don't add the Finalize function under the .post-loading.html the spinner shows up and looks real nice, but doesn't really help with loading new data in. with the setTimeout I thought it would wait, but the spinner doesn't even show up. Does anyone see what the issue is with this code?

• mferly: Try adding the spinner to beforeSend: function() { // spinner code here } then wipe it post success function, ie. after the timeout or in the complete: function() {}
• mferly: And creating a function (FinalizeFeed()) is pointless, really. setTimeout(function() { $(".useractivity").html(result); }, 2000); would suffice just fine. Functions are meant for re-usability purposes. This appears to be a one-off case.

Answer 1

setTimeout(FinalizeFeed(result), 2000);

This calls FinalizeFeed(result) then passes the results of that function call to setTimeout.

You want this:

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

• Morgan Green: Well; still not displaying the spinner at all, so not sure what's going on.

Answer 2

Don't delay the result response. Even by 2 seconds. You don't actually want spinners and loaders showing, as that indicates slow-loading data. If /core/functions.d/feed.php fires and sends a response in 100ms, why wait an additional 1900ms to display it?

By adding your spinner/loader to beforeSend, the spinner fires on the initial $.ajax() call, and is removed once the operation is complete.

So in removing the setTimeout() the data is returned, and displayed, once it is available. Once the operation is complete, the spinner is removed.

Aside: All to often I see people delaying responses just to have a flashy spinner showing. Users want data, not spinners.

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

By removing FinalizeFeed() you're now streamlining your code. That function is tightly coupled into your $.ajax() success function, so it's not actually reusable, and therefore, not worth creating.

• Morgan Green: Thank you. Better way to run it and my data looks cleaner as it updates.

Answer 3

How about something like this:

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

So before sending you show the spinner, then on success you hide the spinner and call the function with setTimeout.

Otherwise on your code you are showing the spinner on success and fading it out, so if the request takes long it wont show up until it's done.

Answer 4

Move fadeOut inside finalizeFeed() and wrap your timeout code with an anonymous function for it to be executed later.

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

• Barmar: You need to fix the call to setTimeout.

Answer 5

You want to update data every 5 seconds. You can do it like this:

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