How to delay a function inside a jQuery-ui slider event

Question

I have several jQuery-ui range sliders on a page which add and remove rows in a table and show their values above the sliders, live as the sliders are slid. the function showData has to check and update every table row before it's done and the slide event doesn't seem to execute anything until the showData function has returned. This table could potentially be quite big (1000+ rows)

Here is one of the slider's settings:

.slider({
    min: 0,
    max: 1250,
    step: 50,
    values: [0, 1250],
    range: true,
    slide: function (e, ui) {
        $('span.height').text(ui.values[0] +
                'mm - ' + ui.values[1] + 'mm ');
        showData('height', ui.values, 'range');
    }
});

My problem is that for IE users on a slow computer, nothing is seen to have changed when they slide the slider, not even the slider handle position. Until a second or more later.

What I want to do is let the $('span.height').text(... part of the slide function run, and the ui slider handle to be updated in the right place (ie: under the mouse) right away.

Then if the showData function was run after say 300 milliseconds, but only if the slide event was not triggered again in that time, would be perfect.

I would just put the showData function on the slider's stop event, but that's not what the client wants.

I put up a working version on jsfiddle: http://jsfiddle.net/vcgAU/1/

Any help would be appreciated

Thanks

Answer 1

Since your current callbacks look very similar, you can make them generic and run them through a delay function, it needs to be per type though since they affect different things (height, width, depth). You can create a delay function that's per type like this:

var timers = {};
function delayShowData(type, values) {
  clearTimeout(timers[type]);
  timers[type] = setTimeout(function() {
    $('span.' + type).text(values[0] + 'mm - ' + values[1] + 'mm');
    showData(type, values, 'range');
  }, 300);
}

Then in your slide callback, call this function instead, like this:

slide: function (e, ui) {
    delayShowData('height', ui.values);
}

You can test a working demo here. In this setup it stores a timer for the type of change you're making, so per-slider effectively, and when changing again inside the interval it's clearing the timer out resetting the 300ms timer...so only leaving it alone for 300ms will result in a showData() being called for this type.