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 for http://jsfiddle.net/aEftd/4/

Answer 2

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

$("#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/

Jquery移动事件延迟

3 个答案: