Как настроить таймер для предотвращения перекрывающихся вызовов ajax?

Question

У меня есть страница, где результаты поиска отображаются как в сетке, так и на карте (используя KML, сгенерированный на лету, наложенный на встроенную карту Google). Я подключил это, чтобы работать как пользовательские типы; вот скелет моего кода, который работает:

$(function() {
    // Wire up search textbox
    $('input.Search').bind("keyup", update);
});

update = function(e) {
    // Get text from search box
    // Pass to web method and bind to concessions grid
    $.ajax({  
        ...
        success: function(msg) {
            displayResults(msg, filterParams);
        },
    });

}

displayResults = function(msg, filterParams) {
        // Databind results grid using jTemplates
        // Show results on map: Pass parameters to KML generator and overlay on map
}

В зависимости от поиска могут быть сотни результатов; и поэтому работа, выполняемая в displayResults, требует интенсивной работы процессора как на сервере (выполнение запросов к базе данных, создание и упрощение KML на лету), так и на клиенте (привязка данных к сетке результатов, наложение больших файлов KML на карту) ,

Мне нравится непосредственность получения более узких результатов при наборе текста, но я бы хотел минимизировать количество обновлений. Какой самый простой способ ввести N-секундную задержку после того, как пользователь перестает печатать, перед запуском функции update?

Answer 1

Вместо прямого вызова update() вызовите упаковщик, который проверяет наличие отложенных обновлений, ожидающих ответа:

$('input.Search').bind("keyup", delayedUpdate);

function delayedUpdate() {
    if (updatePending) {
        clearTimeout(updatePending);
    }

    updatePending = setTimeout(update, 250);
}

function update() {
    updatePending = false;

    //$.ajax(...
}

Вы, вероятно, также должны добавить:

$('input.Search').bind("blur", update);

Это сделает немедленное обновление, когда пользователь покинет поле. Но убедитесь, что вы также добавили обработку для случая, когда пользователь покидает поле в ожидании отложенного обновления (сначала отмените отложенное обновление).

Answer 2

Вы можете использовать Window.SetTimeOut (YourRefreshMethod), когда вызывается YourRefereshMethod, он проверит количество набираемых символов и сравнит его с некоторым счетчиком, счетчик начнёт со значения 0, поэтому начальный вызов не будет делать ничего, кроме обновления счетчика с использованием текущего числа набранных символов, во второй раз, когда ваш метод будет вызван, он проверит количество набранных символов, если оно совпадает с предыдущим числом, записанным счетчиком, то это означает, что пользователь не сделал t введите что-нибудь новое, и вы можете запустить метод Refresh, иначе вы обновите значение счетчика

Answer 3

В качестве первого подхода, что-то вроде:

$('input.Search').bind("keyup", function() { setTimeout(update, 5) } );

(не уверен в точном синтаксисе setTimeout).

Вы также можете сохранить переменную, чтобы отслеживать, был ли тайм-аут уже запланирован или нет.