Question

I’ve looked around a bit and haven’t found an answer to this yet.

I have an ajax request that when you click the button it sends info to the server and hides the current div and loads a loading gif. I have it set so when the server responds it gets rid of loading gif and shows the content from the server.

code:

$("#submit").click(function(e){
    e.preventDefault();
    var $domain = $.fn.HTTP($('#domain').val());
    if(!$.fn.ValidURL($domain)){
      $('#domainerror').fadeIn(500);
      return false;
    } 

    if($('#domainerror').css('display')!=='none'){
      $('#domainerror').fadeOut(350);
    }

    $('#question').hide(500, function(){
        $('#waiting').show(350);
    });

    $.getJSON('http://localhost/file.php',
    {
        i: $domain
    },
      function(data){
        $('#answer').html(data.message + $('#trybutton').html());
        $('#waiting').hide(350, function(){
          $('#answer').show(350);
        });
    });
});

The problem is jQuery receives the response from the server too fast and the loading gif doesn’t disappear.

However if I tell the server to sleep for 3 seconds it works just fine. This is not the solution I want.

Any ideas?

Answer 1

Surely it’s a good thing your users aren’t having to see a loading animation because it’s so fast?!

Anyway, the problem is that the animation is taking at least 500ms – animations are processed asynchronously, at the same time as your AJAX request. Instead of making the server sleep, which is arguably a waste of CPU, make the browser wait instead, before you send the AJAX request.

Put the call in a setTimeout() function, this example will make it wait 3 seconds:

setTimeout(function() {
    $.getJSON('http://localhost/file.php',
    {
        i: $domain
    },
    function(data){
        $('#answer').html(data.message + $('#trybutton').html());
        $('#waiting').hide(350, function(){
            $('#answer').show(350);
        });
    });
}, 3000);

The ideal solution however would be to not use animation effects and just use show() and hide().