jQuery/Javascript - Delay the execution of a function until another one is complete

Question

I'm trying to load a php page into an element and then apply a slider to the content loaded.
The problem is the content takes a few seconds to load after the function is executed and the slider already begins to work.
I'm trying to somehow delay the execution of the slider function until the php embedding function is done.

Here's my code:

$(document).ready(function () {
    ajaxpage("products.php?type=featured&order=salesNumber", "featuredArea");
});

$(document).ready(setTimeout(function () {
    $(".productsArea").easySliderProducts({
        nextText: "Next",
        prevText: "Previous"
    });
    document.getElementById("outputHere").innerHTML = $(".page ul#featuredArea li").length;
    $(".page").easySlider({
        s: $(".page ul#featuredArea li").length,
        auto: true,
        continuous: false,
        nextId: "featNextArrow",
        nextText: "",
        prevId: "featPrevArrow",
        prevText: "",
        pause: 7500
    });
}, 1000));

I separated both in order to use the setTimeout function.
It works for me, but the result may be different for other people.
I was wondering if it's possible to wait until the ajaxpage function is done loading the page and THEN continue with the code?

AjaxPage code: http://pastebin.com/XWa0jD77
easySlider1.7 code: http://pastebin.com/CzK8BzfL

I thought about calling the slider from within the embedded page, though that won't work.

Answer 1

As you are already using jquery i suggest you throw away your ajaxpage function and use $jQuery.load(); instead.

As you can see in the jquery doc`s, load() comes with a callback function which does exactly what you need.