JqueryUI Slider 让更改事件处理程序等待另一个更改事件答案

【问题标题】：JqueryUI Slider let the change event handler wait for another change eventJqueryUI Slider 让更改事件处理程序等待另一个更改事件
【发布时间】：2013-02-04 17:33:07
【问题描述】：

我用两个手柄设置了我的 jqueryUI 滑块。它的更改事件处理程序如下所示：

change: function(event, ui){
    $("#priceFilterForm").submit();
},

只要一个句柄被移动，它就会触发表单。

我希望更改事件处理程序的行为如下：

如果触发更改事件，请等待 3 秒
如果触发另一个更改事件，则重置 3 秒计时器
如果3秒内没有其他变化事件提交表单

能否请您提示我一种有关如何实现该行为的技术。

感谢 Garry 的解决方案：

var timer = $.timer(function(){
   $("#priceFilterForm").submit();
});

// slider options:

slide: function(event, ui){
    timer.pause();
    // ...
},
change: function(event, ui){
    timer.stop();  // Not sure if stop is needed here..
    timer.set({ time : 1500, autostart : true });
}

+ 不要忘记将计时器插件包含到您的 javascript 中

【问题讨论】：

您可以查看 jQuery hoverIntent 插件，也许尝试将其修改为 .change 而不是 .hover，或者只是了解它是如何工作的：archive.plugins.jquery.com/project/hoverIntent 这个想法正是与您的相同，但输入侦听器不同。

标签： javascript jquery-ui

【解决方案1】：

var timer = $.timer(function() {
            alert('This message was sent by a timer.');
    });

    timer.set({ time : 5000, autostart : true });

    timer.set(options);
    timer.play(reset);  // Boolean. Defaults to false.
    timer.pause();
    timer.stop();  // Pause and resets
    timer.toggle(reset);  // Boolean. Defaults to false.
    timer.once(time);  // Number. Defaults to 0.
    timer.isActive  // Returns true if timer is running
    timer.remaining // Remaining time when paused

演示

http://jchavannes.com/jquery-timer/demo

下载

http://code.google.com/p/jquery-timer/downloads/detail?name=jquery-timer.zip 查看源代码

http://code.google.com/p/jquery-timer/source/browse/

【讨论】：