3

我在一个页面上有几个 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/

任何帮助，将不胜感激

谢谢

4

1 回答 1

5

由于您当前的回调看起来非常相似，您可以使它们通用并通过延迟函数运行它们，但它需要按类型进行，因为它们会影响不同的事物（高度、宽度、深度）。您可以创建每个类型的延迟函数，如下所示：

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. In this setup it stores a timer for the type of change you're making, so per-slider effectively, and when changing again inside the interval it's clearing the timer out resetting the 300ms timer...so only leaving it alone for 300ms will result in a showData() being called for this type.

于 2010-09-12T09:49:34.057 回答