jquery slider mouse events in FireFox

Question

I have a jquery slider (v 1.8.16) which triggers redrawing a canvas element on the slide event. The canvas drawing takes approximately 40ms in both FireFox and in Chrome.

A code snippet of the slide event is here below - pretty basic:

    $( $rSlider).on( "slide", function( event, ui ) {
        DrawAllDataSets(ui.value);

    } );

The issue is that the slider becomes "stuck" in FireFox until the slider mouse events stop (i.e. the slider is not moved any longer), and then a series of "slide" events flow through. In Chrome & IE the slider events flow through immediately and the slider responds as the user drags, and the canvas is drawn accordingly.

If the DrawAllDataSets function is removed, the slider responds normally in FireFox.

My initial thought was that the canvas draw is taking too much time, but the 40ms which is comparable to chrome and ie seems reasonable.

Any thoughts are appreciated.

Answer 1

If you're requesting draw-change loops for every event fired by the slider then you could easily be running into accumulated drawing loops.

For example, the mouse moves that trigger your slider to move are often fired 30-40 times per second. So doing the math: 1000ms/40events==25ms between slider events being fired.

So if your drawing takes 40ms you might easily be requesting too many draws for the canvas to keep up with (and therefore the slider freezes until the canvas can catch up).

One solution is to set your desired drawing properties in response to the slider event, but not trigger the redraw immediately.

Then create a separate requestAnimationFrame loop that only draws according to the latest drawing properties. The loop will not try to draw every change that the slider sets, it will just draw the latest change.