Question

我在页面上有几个jQuery-ui范围滑块，可以在表格中添加和删除行，并在滑块上方显示它们的值，滑动时滑动。函数showData必须在完成之前检查并更新每个表行，并且在showData函数返回之前，slide事件似乎没有执行任何操作。这个表可能很大（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回调中，请改为调用此函数，如下所示：

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

You can test a working demo here。在此设置中，它会为您正在进行的更改类型存储一个计时器，因此每个滑块有效，并且当在间隔内再次更改时，它会清除计时器，重置300ms计时器...所以只留下300毫秒将导致为此类型调用showData()。

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

1 个答案: