How to delay function inside jQuery-ui slider event

Question

I have several jQuery-ui sliders on the page that add and delete rows in the table and show their values ​​above the sliders, live when the sliders move. the showData function should check and update each row of the table before it is complete, and the slide event does not seem to do anything until the showData function returns. This table could potentially be quite large (1000+ rows)

Here is one of the slider 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 has changed when they slide the slider, not even the slider position. Until the second or more later.

, , $('span.height'). (... ui (.. ) ) .

, showData 300 , , .

showData , , .

jsfiddle: http://jsfiddle.net/vcgAU/1/

Answer 1

, , , (, , ). :

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);
}

slide , :

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

. , , , 300 ... 300 , showData() .