javascript - SetTimeOut 正在堆叠所有按下的按键并在超时完成后触发

Question

我已将 my 设置为在键入setTimeout最后一个后 1 秒运行。keyup我正在设置 ajax 服务器端验证。

问题

出于某种原因，这将等待 1 秒，然后触发我返回的多次点击，然后再进行第二次休息。我只希望最后一个按键触发 ajax 调用。

代码

   form.items = {
        init:function(){
            this.call();
        },
        call:function(){
            //Check all visible elements
            form.init.mainItems.each(function(){
                $(this).keyup(function(){
                    form.items.main($(this));
                });
            });
        },
        main:function(myself){
                    form.ajaxEvents.ajaxTimer = setTimeout(function(){form.ajaxEvents.call(myself);}, form.ajaxEvents.ajaxTimerSetting);
            }
        }
    };

  //Setting up the timer
 form.ajaxEvents.ajaxTimer = setTimeout(function(){
       form.ajaxEvents.call(myself);
 }, form.ajaxEvents.ajaxTimerSetting);

 form.ajaxEvents = {
     ajaxTimerSetting:1000,
     ajaxTimer:null,
     call:function(me){
         clearTimeout(form.ajaxEvents.ajaxTimer);
         //turn off so we wait for ajax to complete
            $.ajax({
                url:'registration/ajax/'+item,
                data:{"info":me.val()},
                type:'post',
                success:function (data) {
                    //data
                }
            });
        }
    };

提琴手

JS Fiddle 完整的工作代码和描述的错误

Answer 1

我希望这能帮到您。

var timer;

$("input").on('keyup', function() {
    clearInterval(timer);  //clear any interval on key up
    timer = setTimeout(function() { //then give it a second to see if the user is finished
        //do .post ajax request //then do the ajax call
    }, 1000);
});

Answer 2

我认为，当事件keyup被触发时，你应该首先验证之前没有创建过现有的超时，否则会有很多 1 秒的超时被触发。如果已经有超时，您应该使用该clearTimeout(id_timeout)功能取消它。然后你只需要设置你的 1 秒超时。

使用您form.ajaxEvents.ajaxTimer存储有关现有超时的信息，这将给出如下内容：

main:function(myself){
    // verify if existing timeout
    if(form.ajaxEvents.ajaxTimer != null) {
        clearTimeout(form.ajaxEvents.ajaxTimer);
    }
    // finally
    form.ajaxEvents.ajaxTimer = setTimeout(function(){form.ajaxEvents.call(myself);}, form.ajaxEvents.ajaxTimerSetting);
}

并且可能form.ajaxEvents.ajaxTimer = null在您的触发函数中添加一个。