[jQuery] animated list problem

[Pere Gar]

Hi,

I create a list of items, which are randomly being added to the top of
the list and removed from the bottom of it.

My idea was to animate newly appearing items with sliding them down
and fading in, and animate items, being removed by fading out and
sliding down.

It more or less works, but one time it just stops working and some
items are stuck and some internal jquery loop keeps running and giving
me the whole bunch of errors in browser. Actually it works as expected
in IE, but stuck in both Opera and FF.

Here is a little snipplet, sorry, if it's too long


function list(id) {
        this.list = document.getElementById(id);
        this.countries = ['cy', 'ee', 'lb', 'md', 'mv', 'so', 'zm'];
        this.names = ['bob', 'james', 'hoha', 'vitja', 'ziz', 'Maho',
'urjuk', 'Zizjaj'];
        this.i = 0;
}

list.prototype.add_item = function (name, country) {
        // make it appear by sliding down

        $('<li id="i' + (this.i++) + '"><img src="icons/' + country +
'.gif">' + name + '</li>'). // create new list item element
        hide().               // hide it first
        prependTo(this.list). // prepend to the main list
        slideDown('slow');    // show yourself
}

list.prototype.remove_item = function () {
        // find last element in list
        var li = $('li:last', this.list);

        // if not found, means, no elements in list
        if (!li.length) return;

        // get DOM element
        var l = li.get();

        // remember removing for the current element to avoid double removing
        if (typeof l.rm != 'undefined') return;
        l.rm = true;

        // fade it out, and then slide up, then remove forever
        li.fadeTo('slow', 0.01, function () {
                        $(this).slideUp('slow', function () {
                                $(this).remove();
                        });
                });
}

// get random array element
list.prototype.get_random = function (arr) {
        return arr[Math.floor(Math.random() * arr.length)];
}

list.prototype.start = function () {
        // if button pressed, stop
        if (this.stopped)
                return;

        // 50/50 add or remove element
        if ((Math.random() >= 0.5) )
        {
                // remove from the tail of a list
                this.remove_item();
        }
        else
        {
                // add to the top of a list
                this.add_item(this.get_random(this.names),
this.get_random(this.countries));
        }

        // repeat after random timeout (adjust random multiplier to regulate
speed)
        window.setTimeout('items.start()', Math.round(Math.random() * 1000));
}

// push the button
list.prototype.stop = function () {
        this.stopped = true;
}

The example may be seen at http://myprofi.sourceforge.net/stat/

Sometimes it works for some time and then gets stuck and sometimes it
gets stuck right away.

When I debugged it, it appeared, that if I remove items without any
animation, $('li:last').remove(); it won't ever get stuck, and works
allright. The problem raises only if I add animation for the item
being removed.

Actually $(this) object inside callback function of fadeOut or slideUp
whether disappears or gets somehow empty, so it's not available for us
by the time the animation has played.

I'm affraid it to be some multithreading desync problem, as it's too
hard to solve for such an easy piece of code.

Or, if it's somehow related to the jquery internals or the process
jquery runs the animation I would very appreciate to learn it from
your comments.

Thanks in advance