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

我在页面上有几个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(…部分的Slide函数运行,并且ui滑块句柄在正确的位置(即,在鼠标下方)立即更新.

然后,如果showData函数在大约300毫秒后运行,但是只有在此期间未再次触发slide事件时,它才是完美的.

我只是将showData函数放在滑块的stop事件上,但这不是客户端想要的.

我在jsfiddle上放置了一个工作版本：http://jsfiddle.net/vcgAU/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: function (e, ui) {
    delayShowData('height', ui.values);
}

You can test a working demo here.在此设置中,它存储了您要进行的更改类型的计时器,因此可以有效地按滑块操作,并且在间隔内再次更改时,它清除了计时器,将300ms计时器重置了…因此仅将其留给300ms将导致为此类型调用showData().

标签：jquery-ui,slider,javascript,jquery,uislider
来源： https://codeday.me/bug/20191023/1916000.html