jquery - jQuery移动事件延迟

Question

我在 HTML+jquery mobile 中有一个小仪表板，其中包含许多按钮、滑块、复选框、数字输入等。

显然，我想将操作（更改字段等）连接到对后端的调用。但是，如果有人连续三次快速按下开关按钮，我不想触发三个后端调用，因为这些按钮点击实际上会产生硬件后果。

我想要的是每个按钮/滑块/复选框仅在 X 秒延迟后触发后端调用（当我认为用户已决定输入的数字、滑块或复选框具有他们真正想要的值时）。

实现这样的事情的最优雅的方式是什么？

Answer 1

如果您特别希望在用户停止输入数据后延迟 x 秒，请使用设置的超时和更新功能。当然，它会导致用户体验延迟。

var seconds = 3, timer;

$(function(){

    var update = function(){
        $("#response").append("<p>run updates!</p>");
    }

    $("#slider-1").change(function(){
        if(timer) clearTimeout(timer);
        timer = setTimeout(update, seconds * 1000);
    });

});

这是一个 jsfiddle http://jsfiddle.net/aEftd/4/

Answer 2

当我编写一些ajax调用时，我禁用了按钮，直到后端调用通过或失败。此外，.one()jQuery 中有一个方法可能会有所帮助，具体取决于您想使用它的位置。

$("#input").prop('disabled', true);

Answer 3

这可能不是最优雅的方式，但它应该适用于您的情况：

var flag=1;
function resumeEvents() {
    //reset flag to 1 to accept the input again after time
    flag=1;
}

$(function() {
    $("#button").click(function() {
        if(flag==1){
            //perform your task 
            alert("Task performed");
            //set flag to 0 so it doesn't accept more clicks
            flag=0;
            //time to pause before next click is accepted.
            setTimeout(resumeEvents, 3000);
        }
    });

});

摆弄你的场景：http: //jsfiddle.net/bmRsr/