Script.aculo.us Sortable onUpdate problem in IE.

Question

I'm working on a project where I am using a script.aculo.us Sortable object.

It works nice and fast in Firefox and Chrome, but in IE it is incredibly slow whenever I drop an element.

I've done a little checking, and it turns out that in IE, the "onUpdate" callback function gets called about 8 times every time I drop. Normally it is supposed to only get called one time per sortable container (destination and origin).

Since my callback function resizes some elements and draws graphs in those elements, the computation involved for each call is considerable.

Does anyone know what could be causing this problem in IE, or how to fix it?

EDIT: I've noticed that the problem isn't that it triggers many many times when it is dragged, the problem is that the onUpdate function gets fired when the order of a sortable changes, even if the drag hasn't ended. It seems that onUpdate is actually working like the onChange callback, but only IE.

Answer 1

I don't know about script.aculo.us but on resizing events, IE fires events continuously, not just after the resize (like most other browsers do), thus I'm guessing that onUpdate is internally firing based on something else that is firing (like resize) multiple times.

One trick I've used for similar issues, is when the event fires, set the "action" to occur after a timeout (e.g. 1/4sec)... but each new event firing "clears" the timeout... so all you get is the "last" event.

If anyone knows what script.aculo.us is actually triggering on, I might be able to provide more explicit details.

Answer 2

I think how you're using the timer is wrong. You only want the timer to trigger once, after the timeout. If something is still happening during the timeout you need to reset the timer and start again, otherwise you're just delaying the same thing you were doing in the first place.

var timer1
Sortable.create("fList", {constraint:false,onChange:function(){triggerUpdate()}})

function triggerUpdate() {
    clearTimeout(timer1)
    window.setTimeout(function(){showList()},800)
}
function showList() {
    var now = new Date()
    alert(now)

}