jquery - jquery ui中的滑块是否有错误？

Question

ui 插件中的 jquery 滑块似乎可以正常工作，直到您特别快速地移动手柄。

这是一个演示：http: //jsfiddle.net/5aXba/5/

正常移动滑块以获得预期的结果，然后尽可能快地来回移动它，它会中断。在演示中移动它足够快，所有内容都会消失。

我们怎样才能解决这个问题？这是完全无法避免的吗？

Answer 1

我不会说这本身就是一个错误——更像是一个限制。问题基本上是关于滑块的长度是多少，您可以在其上安装/注册多少步以及如何捕获和四舍五入您的鼠标移动。

想象一个 300 像素宽的滑块，上面有 546 个数据点 - 没有办法通过拖动鼠标来捕捉该滑块上的每个点。在您的情况下，如果您在 700px 上放置 12 个点并使用鼠标坐标来捕获这些点，那么您一定会在某个点上偶然发现一个近似值。

如果您确实需要在途中注册每一步的情况 - 我建议在slide() 方法中放置一个控制计数器，并检查鼠标移动是否计入范围内的每一步，否则 - 触发丢失的步骤用js。

从您的演示和我想象的 300px 宽滑块中制作了一个jsFiddle 示例，以演示处理此限制的一种方法（它还跳过第 1 行以适合您的示例）。

...
slide: function (event, ui) {
    if(!counter) counter=$(this).slider( "option", "value" );
    var step=$(this).slider( "option", "step" );
    if(Math.abs(ui.value-counter)>step){
        if(ui.value > counter) for (var i=counter+1;i<=ui.value;i++) addrow(i);
        else if(ui.value < counter) for (var i=counter;i>ui.value;i--) removerow();
    }else{
        if (ui.value > counter) addrow(ui.value);
        else if (ui.value < counter) removerow();                
    }
    counter = ui.value;
}
...