javascript - JQuery slider : lag adding a label next to the handle

Question

我的设计目标与this StackOverflow question类似。关于向 JQuery slider 添加标签，该标签在用户拖动 slider 时显示 slider 的当前值。我对这些答案的问题是，当 slider 即将移动到新位置时，会触发 slide 事件，并提供一个具有新值的 ui 对象。很好，但是我能找到办法掌握的 slider 的唯一位置是旧位置，而不是新位置。如果 slider 上有足够的步数，这并不是很明显，但如果我减少步数，您可以看到标 checkout 现在滑动 handle 曾经的位置旁边。

我已经更新了另一个问题中的 jsFiddle 以说明问题:http://jsfiddle.net/mcuf6/2/

那么，tl;dr:如何通过在滑动事件期间获取 slider handle 的最终位置来避免在用户拖动 handle 时绘制 slider 标签时出现滞后？

Answer 1

编辑:这个小技巧应该可以完全满足您的需要

$(document).ready(function() {
    $("#slider").slider({
        value:0,
        min: 0,
        max: 5,
        step: 1,
        range: 'min',
        slide: function( event, ui ) {
            var that = $(this);
            setTimeout(function() {
            var offsetLeft = that.find(".ui-slider-handle").offset().left;
            $( "#sliderValue" )
                .val( ui.value )
                .css({
                    "position": "absolute",
                    "left": offsetLeft
                });
        },1);
        }
    });
});​

http://jsfiddle.net/mcuf6/6/