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.