jquery doesn't work without alert ()

Question

This is my jQuery:

    $(document).ready(function(){

    $('#mycarousel').jflickrfeed({
        limit: 14,
        qstrings: {
            id: '26339121@N07'
        },
        itemTemplate: '<li><a href="{{image_b}}"><img src="{{image_m}}" alt="{{title}}" width="155" /></a></li>'
    });

    alert("msg");

    $('#mycarousel').jcarousel({
        auto: 3,
        scroll: 1,
        wrap: 'last',
        animation: 800,
        initCallback: mycarousel_initCallback
    });

});

But if I remove "alert("msg");" this code doesn't work properly ... Somebody can help me with this issue ?

Thanks !!!!!!!!

Answer 1

I don't know the control you're using, but this is definitely a timing issue. If you remove the alert, the flickr feed has not yet finished loading when you call jcarousel. That function then probably has nothing to work with yet.

You would have to time the second call so that it fires then the loading from flickr has successfully finished. To do that, jflickrfeed probably as a success callback.

Answer 2

Well, you don't provide any explanation about what jflickrfeed does, but the magic words:

this code only works with an alert in place

tells me that you have an issue with asynchronous code. I'm guessing jflickrfeed returns asynchronously.

What that means is that the function returns control to your script before it's finished what you asked it to do. In a Javascript program this generally means that a call to a server has been made. Such asynchronous code usually includes the option to define a handler, that is, a function that is call once the asynchronous task is complete.

If you have code that is dependent upon the completion of the asynchronous task, it should be put into the handler, not directly after the asynchronous function call.