jQuery UI 滑块 - 大范围答案

【问题标题】：jQuery UI slider - big rangesjQuery UI 滑块 - 大范围
【发布时间】：2010-11-17 20:47:17
【问题描述】：

我有一个用 jQuery UI 制作的滑块，它工作得很好，除了因为范围是从 0 到 250,000，而且每次发生变化时我都有事件调用 ajax 请求，如果我从一侧滑动再慢慢地，结果将是大量的ajax请求，这一点都不好。

一直在研究 jQuery UI 文档，但没有找到解决此问题的任何方法。我会从用户按下滑块时暂时阻止该事件，并且仅在用户停止与其交互时触发该事件，但对此一无所知。

【问题讨论】：

【解决方案1】：

与其订阅滑块的滑动事件，不如订阅它的slidechange或stopslide事件？

$( ".selector" ).slider({
   change: function(event, ui) { ... }  // Called after slidestop or if changed programmatically
   stop: function(event, ui) { ... }    // Called when user stops sliding
});

【讨论】：

【解决方案2】：

一种可能性是创建一个计时器并给它一个以毫秒为单位的超时时间，例如 500，即半秒。每次触发幻灯片事件时，将计时器重置为超时时间。

如果计时器成功倒计时，您可以假设用户已停止移动滑块并触发您的 Ajax 调用。

这是像 TypeWatch 这样的 JQuery 插件使用的方法，仅在用户停止在文本框中输入时发送 Ajax 请求。

【讨论】：

【解决方案3】：

    we can define steps in it also like,

    $("#slider-range-max").slider({
            range : "max",
            min : 0,
            max : 200,
            step : 0.1,   //steps
            value : 200,
            slide : function(event, ui) {
                $("#amount").val(ui.value);
            }
        });

Even we can handle it by writing value in textbox like this,

on value change of textbox call this function by passing parameter this.value

function setSlider(value) {
    $("#slider-range-max").slider({
        range : "max",
        min : 0,
        max : 200,
        step : 0.1,
        value : value,  // value will be setted slider position as par value
        slide : function(event, ui) {
            $("#amount").val(ui.value);
        }
    });
    $("#amount").val($("#slider-range-max").slider("value"));
}

【讨论】：