Wait until div is not visible to process next line

Question

I need to write some code which is supposed to wait until a predefined div is no longer visible in order to process the next line. I plan on using jQuery( ":visible" ) for this, and was thinking I could have some type of while loop. Does anyone have a good suggestion on how to accomplish this task?

$( document ).ready(function() {
    $(".scroller-right" ).mouseup(function( event ) {
        alert('right');
        pollVisibility();
    });
});

function pollVisibility() {
     if ($(".mstrWaitBox").attr("visibility")!== 'undefined') || $(".mstrWaitBox").attr("visibility") !== false) { 
            alert('inside else');
            microstrategy.getViewerBone().commands.exec('refresh');       
     } else {
              setTimeout(pollVisibility, 100);
     }
}

$( document ).ready(function() {
    $(".scroller-right" ).mouseup(function( event ) {
        alert('right');
        pollVisibility();
    });
});

function pollVisibility() {
     if (!$(".mstrWaitBox").is(":visible")) {
        alert('inside if');
        microstrategy.getViewerBone().commands.exec('refresh');     
    } else {
        setTimeout(pollVisibility, 100);
    }
}

div when not visible:

<div class=​"mstrWaitBox" id=​"divWaitBox" scriptclass=​"mstrDialogImpl" dg=​"1" ty=​"edt">​
</div>​

div when visible:

<div class=​"mstrWaitBox" id=​"divWaitBox" scriptclass=​"mstrDialogImpl" dg=​"1" ty=​"edt" visibility="visible">​
</div>​

Answer 1

You can use the setTimeout function to poll the display status of the div. This implementation checks to see if the div is invisible every 1/2 second, once the div is no longer visible, execute some code. In my example we show another div, but you could easily call a function or do whatever.

http://jsfiddle.net/vHmq6/1/

Script

$(function() {
  setTimeout(function() {
    $("#hideThis").hide();    
  }, 3000);
  pollVisibility();

  function pollVisibility() {
      if (!$("#hideThis").is(":visible")) {
          // call a function here, or do whatever now that the div is not visible
          $("#thenShowThis").show();
      } else {
          setTimeout(pollVisibility, 500);
      }
  }
}

Html

<div id='hideThis' style="display:block">
  The other thing happens when this is no longer visible in about 3s</div>

<div id='thenShowThis' style="display:none">Hi There</div>