Question

Alright there’s two ways this can go. One is from the presentation side, and one is from the “processing” side.

Right now I have a table of data set up. Certain actions (typing a search query, clicking a different page number, etc…) trigger a function called refreshData()

refreshData() first calls showOverlay() which fades in an overlay with a loading.gif image. Then it does a $.post() request to get some json data. Then with success it calls hideOverlay() which fades out the overlay.

function refreshData()
    {
        showOverlay();
        var parameters = {'page' : '1', 'per-page' : '5'};
        $.post(updateUrl, parameters,
            function(data){
                $('#data-container table tbody').empty();
                $.each(data.users, function(i, user){
                    $('#data-container table tbody').append('<tr>'+
                    '<td>'+ user.name +'</td>'+
                    '<td>'+ user.registered +'</td>'+
                    '<td>'+ user.id +'</td>'+
                    '<td><a href="/users/edit/' + user.id + '">edit</a></td>'+
                    '</tr>'
                    );
                });
                alternateRows();
                hideOverlay();
        }, "json");
    }

My first issue (presentation) is that if refreshData() is called repeatedly, the overlay fades in and out over and over. It gets stacked up so that even if the user is doing nothing it will fade in and out until it has done as many times as actions occurred. I’d like if it only faded out if the most recent “request” finished.

My second issue (processing) might not even matter. I’m wondering if before “appending” new items to the DOM, I should check if there’s a new request yet. If there is there’s no point in adding things just to remove them. Is this important enough? And if it is how should I do that?

Answer 1

I don’t know what your showOverlay() function looks like, but you could do something like this:

function showOverlay()
{
  if($('#overlay :animated').length > 0 || $('#overlay').hasClass('visible'))
  {
      return;
  }
  //Show overlay
}

:animated