Несколько аякс Разрешить только последний вызов

Question

У меня есть окно ввода, на котором есть запрос ajax при каждом нажатии клавиши. поэтому, если я буду вводить слово «имя», будет 4 успешных запроса. Так что я действительно хочу только последний запрос выполнен. поэтому, если я введу слово «имя», будет только один запрос, который будет последним.

и я также есть решение для этого (это простой пример с методом защелкивания)

JS скрипт

var callid = 1; 

function ajaxCall (checkval){ 
    if(checkval == callid){ 
     $.ajax({ 
      type: 'post', 
      url: baseurl + "test/call_ajax", 
      data: { 
       val: "1" 
      }, 
      success: function(data) { 
       console.log(data) 
      } 
     }); 
    } 
} 

function call(){ 
    var send = callid+=1; 
    setTimeout(function(){ ajaxCall(send) } , 500); 
} 

HTML скрипт

<a href="#" onclick="call()" > Call ajax </a> 

Это прекрасно работает. Но я подумал, есть ли способ усовершенствовать его немного больше.

Любые идеи :)

Answer 1

Уверен, что вы ищете более совершенную технику для диспетчеризации событий.

var eventDispatcher = null; 
$('.textbox').keyup(function(){ 
    if(eventDispatcher) clearTimeout(eventDispatcher); 
    eventDispatcher = setTimeout(function(){ 
     $.ajax({ ... }); 
    }, 300); 
}); 

Answer 2

SetTimeout возвращает идентификатор, который можно сохранить и использовать для очистки ранее установленного таймера:

var timerId; 

function call() { 
    if (timerId !== undefined) { 
     clearTimeout(timerId); 
    } 

    timerId = setTimeout(function() { ajaxCall(send) }, 500); 
} 

Результатом этого должно быть, что метод ajaxCall будет называться 500мс после ввода последней буквы.

Answer 3

Вы можете сделать свой ajax внутри setTimeout. Таким образом, вам не нужно объявлять и проверить дополнительную переменную или написать другую функцию, как вызов()

$(document).ready(function() { 
    var timer; 
    $('#fillMe').keypress(function() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      //replace this with your ajax call 
      var content = $('#fillMe').val(); 
      $('#result').text('You will only see this if the user stopped typing: ' + content); 
     }, 1000); // waits 1s before getting executed 
    }); 
}); 

<input type="text" id="fillMe"> 
<div id="result"></div> 

На каждом случае при нажатии на кнопку это очищает тайм-аут и сразу же создает новый тайм-аут. Это означает, что содержимое функции setTimeout запускается только в том случае, если пользователь прекратил печатать в течение как минимум 1 секунды. Конечно, 1 секунда - это просто значение для примера. Вы можете изменить его на то, что вы хотите или думаете, что это хорошее время (как 500мс)

Смотрите мой jsfiddle