how to wait for element visibility in phantomjs

Question

Users click this link:

<span onclick="slow_function_that_fills_the_panel(); $('#panel').show();"> 

Now I'm simulating the click in phantomjs:

page.evaluate(   function() { $("#panel").click(); } ); console.log('SUCCESS'); phantom.exit(); 

Phantom exits before the slow function ends its execution and the DIV becomes visible. How can I implement waiting?

Answer 1

Heres a spin of Cybermaxs's answer:

function waitFor ($config) {     $config._start = $config._start || new Date();      if ($config.timeout && new Date - $config._start > $config.timeout) {         if ($config.error) $config.error();         if ($config.debug) console.log('timedout ' + (new Date - $config._start) + 'ms');         return;     }      if ($config.check()) {         if ($config.debug) console.log('success ' + (new Date - $config._start) + 'ms');         return $config.success();     }      setTimeout(waitFor, $config.interval || 0, $config); } 

Example of use:

waitFor({     debug: true,  // optional     interval: 0,  // optional     timeout: 1000,  // optional     check: function () {         return page.evaluate(function() {             return $('#thediv').is(':visible');         });     },     success: function () {         // we have what we want     },     error: function () {} // optional }); 

It's a little easier when you use a config variable.