jquery - jQuery UI 滑块 - 大范围

Question

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

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

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

Answer 2

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

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

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

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