I have this function in jQuery that gets data from a page with POST, then sets the response into a div:

$("#go").click(function(){ 
   $.post("get.php", {p: 'abc'}, function(data){ 
   $('#result').html(data); 
   });
});

This works, but is there anyway to delay the data going into the #result tag by about 3 seconds?

Eventually I want the tag to say:

"Loading.", "Loading..", and "Loading..." for a second each, then show the data.

I have this function in jQuery that gets data from a page with POST, then sets the response into a div:

$("#go").click(function(){ 
   $.post("get.php", {p: 'abc'}, function(data){ 
   $('#result').html(data); 
   });
});

This works, but is there anyway to delay the data going into the #result tag by about 3 seconds?

Eventually I want the tag to say:

"Loading.", "Loading..", and "Loading..." for a second each, then show the data.

• javascript
• jquery
• http-post
• delay

6 Answers 6

This is the syntax you should use.

var delayCounter = 3;
var delayTimer = '';
delayTimer = setInterval(function(){
  if (delayCounter > 0){
    $('#result').html('Loading...');
  }else{
    $('#result').html(data);
    clearInterval(delayTimer);
  }
  delayCounter--;
},1000);

Whats happening here?

• We use the delayCounter variable to count how many times we have delayed the action. Its starting value is 3 - so we will be "delayed" 3 times.
• The delayTimer variable is the timer itself that will count each delay.
• We use the setInterval function becuase that is exactly what we are wanting to do - set intervals between executing our code.
• The clearInterval is pretty self explanatory - this ends and clears the timer.
• For each iteration we decrease the delayCounter variable so that we can keep track of how many intervals have passed.
• We use miliseconds to define the delay - here I have used 1000 which is 1 seconds (1000 milliseconds in one second).

One more addition you might like to implement is that instead of simply placing the "Loading" text in your element, to make it a little bit more dynamic by appending text to it.
What might be fun is to append the ellipsis to the word "Loading" to get an effect like :

First set the initial value to "Loading" then append each dot -

$('#result').html($('#result').html()+'.');
// Loading
// Loading.
// Loading..
// Loading...

_{That said you could also just take the animated gif and use that lazy-programmers :P}

Try:

setTimeout(function() {
    $('#result').html(data);
}, 3000);

To delay the execution of a function in JavaScript use the setTimeout method. Works a little like:

var doLater = setTimeout(function(){
alert('I like to wait 5 seconds');
},5000); //delay is stated in ms

In your case that would end up in:

$("#go").click(function(){ 
   $.post("get.php", {p: 'abc'}, function(data){ 
   var wait = setTimeout(function(){$('#result').html(data);},3000); 
   });
});

Edit: updated to add loading functionality.

$("#go").click(function(){ 
   $.post("get.php", {p: 'abc'}, function(data){ 
   window.intervalTimer = setInterval(function(data) {
       if (!window.timeoutCount)
            window.timeoutCount = 0;

            if (++window.timeoutCount > 3) {
                $('#result').html(data);
                clearInterval(window.intervalTimer);
             }
            else
                  $('#result').html("Loading..")
    }, 1000); 
   });
});

Try this:

$("#go").click(function(){ 
   // Show loader here
   $.post("get.php", {p: 'abc'}, function(data){ 
       setTimeout(function () {
           // Hide loader here
           $('#result').html(data);
       }, 3000); 
   });
});

$("#go").click(function(){ 
  $.post("get.php", {p: 'abc'}, function(data) {  
    $('go').html('Loading.');
    setTimeout("function() {
      $('go').html('Loading..');
    }",1000);
    setTimeout("function() {
      $('go').html('Loading...');
    }",1000);
    $('#result').html(data); 
  }
}