SetTimeOut укладывает все нажатые клавиши и срабатывает после окончания таймаута

Question

Я установил свой setTimeout для запуска через 1 секунду после ввода последнего keyup. Я настраиваю проверку на стороне сервера ajax.

Проблема

По какой-то причине, это будет ждать 1 секунду, а затем огонь для однако много кликов я назад, прежде чем принимать второй перерыв. Я бы хотел, чтобы только последний keyup запускал вызов 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 
       } 
      }); 
     } 
    }; 

JsFiddle

JS Fiddle for full working code and error described

Answer 1

Я думаю, что, когда событие 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 в вашей вызвал функцию.

Answer 2

Надеюсь, это поможет вам.

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); 
});