Как удерживать несколько миллисекунд перед выполнением ajax-запроса события keyup в jQuery

Question

Я делаю небольшое приложение, используя API Карт Google. Вы можете ввести пин-код в текстовом поле, и будет вызван AJAX-вызов, чтобы получить координаты из моей базы данных. Я вызываю действие на событие keyup и после 2 символов в текстовом поле. Проблема в том, что я хочу, чтобы пользователь мог набрать все это, прежде чем я начну снимать вызовы AJAX. Я установил для Asynch значение false, иначе асинхронный вызов не позволит мне удалить маркеры с карты и принесет больше маркеров, прежде чем все они исчезнут.

    $('input[name="location"]').keyup(function(){
        if($(this).val().length > 1){
            $(this).css('background', '#fff url("/images/indicator.gif") no-repeat center right');
            deleteOverlays();
            $.ajax({
                dataType: "json",
                url: "locAjax.php",
                data: ({term : this.value}),
                async: false,
                type: "GET",
                success: function(data) {
                    setMarkers(map, data);
                }
            });
            $(this).css('background', '#fff');
        }
    });

Могу ли я использовать какое-то время или что-то еще до вызова, чтобы дать пользователю достаточно времени, чтобы написать все это. или хотя бы половину.

Пожалуйста, дайте мне знать.

Большое спасибо.

Answer 1

var timer;

$('input[name="location"]').keyup(function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
    if($(this).val().length > 1){
        $(this).css('background', '#fff url("/images/indicator.gif") no-repeat center right');
        deleteOverlays();
        $.ajax({
            dataType: "json",
            url: "locAjax.php",
            data: ({term : this.value}),
            async: false,
            type: "GET",
            success: function(data) {
                setMarkers(map, data);
            }
        });
        $(this).css('background', '#fff');
    }
    }, 5000 ); // <--- do ajax call after 5 seconds of the last keyup character...
});

Answer 2

Это довольно просто, вам нужно использовать setTimeout и clearTimeout. Например,

var timerId = null;
$('input[name="location"]').keyup(function(){
   if (timerId) {
      clearTimeout(timerId);
   }
   timerId = setTimeout(makeServiceCall, 20); // wait for 20 millisecond.
});

Здесь makeServiceCall будет функцией, в которой будет указан код, выделенный вами для вызова службы. Эта функция также должна сбросить timerId на ноль. Поэтому всякий раз, когда нажимается клавиша, мы устанавливаем таймер для запуска сервисного вызова, если клавиша нажимается до истечения времени ожидания, мы сбрасываем предыдущий таймер и устанавливаем новый.