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

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

你可以在这里测试一个有效的演示.在这个设置中,它存储了一个计时器,用于你正在进行的更改类型,因此每个滑块有效,并且当在间隔内再次更改时,它会清除定时器,重置300ms计时器...所以只留下它300ms将会导致showData()为此类型调用.