Как отложить функцию внутри события слайдера jQuery-ui - PullRequest
Новая
       12

Как отложить функцию внутри события слайдера jQuery-ui

3 голосов
/ 12 сентября 2010

У меня есть несколько ползунков диапазона jQuery-ui на странице, которые добавляют и удаляют строки в таблице и показывают их значения над ползунками в режиме реального времени, когда ползунки скользят.функция showData должна проверять и обновлять каждую строку таблицы до того, как это будет сделано, и событие slide, похоже, ничего не выполняет, пока не вернется функция showData.Эта таблица потенциально может быть довольно большой (1000+ строк)

Вот одна из настроек слайдера: 

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

Моя проблема в том, что для пользователей IE на медленном компьютере ничего не видноизменить, когда они скользят ползунок, даже не положение ручки ползунка.До секунды или более позже.

То, что я хочу сделать, - это запустить $ ('span.height'). Text (... часть функции слайда и запустить дескриптор слайдера пользовательского интерфейса для обновления).в правильном месте (то есть: под мышью) прямо сейчас.

Тогда, если бы функция showData была запущена, скажем, через 300 миллисекунд, но только если событие слайда не было вызвано снова за это время, было бы идеально.

Я бы просто включил функцию showData в событие остановки ползунка, но это не то, чего хочет клиент.

Я установил рабочую версию в jsfiddle: http://jsfiddle.net/vcgAU/1/

Любая помощь будет оценена

Спасибо

1 Ответ

5 голосов
/ 12 сентября 2010

Поскольку ваши текущие обратные вызовы выглядят очень похожими, вы можете сделать их универсальными и выполнить их через функцию задержки, хотя это должно быть для каждого типа, так как они влияют на разные вещи (высоту, ширину, глубину).Вы можете создать функцию задержки для каждого типа, например: 

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().

...