javascript - 如何延迟 jQuery-ui slider 事件中的函数

Question

我在一个页面上有几个 jQuery-ui 范围 slider ，它们在表格中添加和删除行并在 slider 上方显示它们的值，随着 slider 的滑动而变化。函数 showData 必须在完成之前检查和更新每个表行，并且在 showData 函数返回之前，幻灯片事件似乎不会执行任何操作。该表可能非常大(1000 多行)

这是 slider 的设置之一:

.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 用户，滑动 slider 时看不到任何变化，甚至 slider handle 位置也没有变化。直到一秒钟或更长时间。

我想要做的是让 $('span.height').text(... 部分滑动功能运行，并在正确的位置更新 ui slider 句柄(即:在鼠标下方) 马上。

然后如果 showData 函数在 300 毫秒后运行，但前提是在那段时间没有再次触发幻灯片事件，那就完美了。

我只想将 showData 函数放在 slider 的停止事件上，但这不是客户想要的。

我在 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 回调中，改为调用this 函数，如下所示:

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

You can test a working demo here .在此设置中，它为您所做的更改类型存储一个计时器，因此每个 slider 都有效，并且当在间隔内再次更改时，它会清除计时器以重置 300 毫秒计时器...所以仅将其单独放置 300 毫秒将导致为此类型调用 showData()。