使用jquery select将html更改为ui滑块幻灯片事件

Question

所以我有一个select和一个使用http://filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/将其转换为滑块的函数

<select id="{{ section }}-anonymity-select">
    <option value="anonymous"></option>
    <option value="uw-student"></option>
    <option value="username"></option>
</select>

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            alert(ui.value);
        }
    }
    }).hide();

我想要做的是(现在，稍后我想根据值更改另一个元素的innerHtml )在用户滑动时警告滑块的当前值。

代码几乎做了我想要做的事情，除了滑动事件“在滑动过程中每次鼠标移动都会触发”，这意味着一个小幻灯片大约会触发10次。非常烦人。不是我想要的。而且它似乎也以编程方式改变了值--我的句柄一直跳来跳去。

我也尝试过更改，但它只在停止时触发，所以如果用户只是来回滑动，而不是释放鼠标按钮，它就不会报警。坏的。

我该怎么处理呢？我想我需要一些像“值改变”这样的东西作为事件？但是如何在不不断检查的情况下实现它呢？

Answer 1

当然，在我发帖2分钟后，我意识到了一个解决方案。

var slidervalue = 0;

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            if(ui.value!=slidervalue){
                $("#"+section+"-anonymity-header").html("Select anonymity level: "+ui.value);
                slidervalue = ui.value;
            }
        }
    }
    }).hide();

Answer 2

您应该使用change事件，而不是使用slide事件，该事件仅在用户停止与小部件交互时触发：

更改：

    slide: function(event, ui){
        alert(ui.value);
    }

至：

    stop: function(event, ui){
        alert(ui.value);
    }

哇啦！:)

此事件在用户停止滑动时触发。

来源：

更新

您可以使用slide事件并设置一个超时来警报值，以便当用户不断滑动时不会出现任何警报(由于取消了超时)：

var slidervalue = 0,
    timer;

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            clearTimeout(timer);
            setTimeout(function () {
                if(ui.value!=slidervalue){
                    $("#"+section+"-anonymity-header").html("Select anonymity level: "+$(this).slider('values', ui.value));
                    slidervalue = ui.value;
                }
             }, 100);
        }
    }
    }).hide();