如何延迟 jQuery-ui 滑块事件中的函数

Question

我在页面上有几个 jQuery-ui 范围滑块，它们在表中添加和删除行，并在滑块滑动时实时显示它们的值。函数 showData 必须在完成之前检查并更新每个表行，并且在 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(... 幻灯片函数的一部分运行，并且 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 回调中，调用 this 函数，如下所示：

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

您可以在此处测试工作演示。在此设置中，它会为您所做的更改类型存储一个计时器，因此每个滑块都有效，并且当在间隔内再次更改时，它会清除计时器并重置 300 毫秒计时器...所以仅将其保留 300 毫秒就会导致为此类型调用 showData()。