jQuery/JavaScript: событие прерывания?

Question

Это действительно основной вопрос JavaScript и, вероятно, дубликат, но я не знаю ответа!

У меня есть код следующим образом:

function userlist_change(myval, function_type) { 
    // relatively slow code involving Ajax call 
    // based on Ajax results, change some client-side stuff 
} 
$("#subjectlist").change(function() { 
    userlist_change($("#subjectlist").val(), 'change'); 
}).change(); 
$("#subjectlist").keypress(function() { 
    userlist_change($("#subjectlist").val(), 'keypress'); 
}); 

У меня есть проблема, что если .change() событие вызывается функция userlist_change пинает, и это относительно медленно. Если пользователь снова изменит список (например, набрав), мой код ждет завершения userlist_change, прежде чем перезапускать его с новым значением.

В пользовательском интерфейсе это выглядит довольно странно, так как может потребоваться несколько секунд для изменения клиентской стороны, а иногда результаты первого вызова появляются только после того, как пользователь уже совершил второй звонок.

Можно ли каким-либо образом прервать любой существующий процесс userlist_change при запуске события .change() или `keypress()?

[EDIT] Что было бы идеальным, это простая команда «убить любые запущенные функции с помощью этого имени» - возможно ли это? Или мне действительно нужно возиться с таймерами ?!

Answer 1

Вы должны использовать дросселирование события. Это довольно легко сделать с RX для JavaScript, но библиотека довольно сложная. Вы можете попробовать значение фильтра с помощью таймера.

Вот полезный плагин для дросселирования: http://benalman.com/projects/jquery-throttle-debounce-plugin/

Answer 2

вы можете хранить в последний раз запроса в глобальном переменном, и сохранить время запроса в каждом АЯКС запроса, так что, когда вы просто показываете результат первого запроса, если глобальное время последнего запроса больше, чем запрос, запросите время, вы должны показать, иначе нет. Например:

var lastRequestTime; 

function userlist_change(myval, function_type,requestTime) { 

    // relatively slow code involving Ajax call 
    // based on Ajax results, change some client-side stuff 

if(lastRequestTime <= requestTime){ 
//show 
} 
} 
$("#subjectlist").change(function() { 
    lastRequestTime = new Date(); 
    userlist_change($("#subjectlist").val(), 'change',lastRequestTime); 
}).change(); 
$("#subjectlist").keypress(function() { 
    lastRequestTime = new Date(); 
    userlist_change($("#subjectlist").val(), 'keypress',lastRequestTime); 
});