Как обрабатывать большие запросы от клиентов при изменении поля выбора в nodejs
У меня есть огромный список колледжей и школ на стороне сервера для каждого района в штате.
На странице регистрации для пользователя я спрашиваю у него район, и когда он выбирает его, я отправляю запрос на nodejs с именем района в качестве тела запроса. Сервер читает район и отправляет список колледжей клиенту, где я поместил список в поле выбора. (Я отправляю ajax-запросы к nodejs)
Проблема в том, что если я слишком быстро нажму на поле выбора района или воспользуюсь клавишами со стрелками, то он застрянет из-за всех этих внутренних множественных запросов?
Каковы способы улучшения этого метода на сервере и клиенте и как эффективно обрабатывать такие быстрые изменения выбора поля выбора?
var timer = 0 ;
$('#select_district').on('change', function district_selection_changed() {
clearTimeout(timer) ;
timer = setTimeout(function(){
$.ajax({
type: "post",
url: "/getcolleges",
data: {
state: $("#select_state").val(),
district: $("#select_district").val()
},
dataType: "json",
success: function (response) {
$("#select_college").html("");
collegenameelement = document.getElementById("collegenameslist") ;
response.forEach((ele) => collegenameelement.innerHTML = collegenameelement.innerHTML+
`<option>${ele}</option>`)
}
})
} , 500) ;
1 ответ
Я думаю, что лучше всего отложить выполнение запроса на короткое время после последнего вызова. Такое поведение обычно называют debounce
функция, это поддерживается многими служебными библиотеками, такими как Underscore, Lodash и т. д...
Если вы не хотите устанавливать целую библиотеку только для одной функции, вы можете проверить их код и реализовать свою собственную.
Вы также можете заблокировать пользователя от выбора нового района, если запрос все еще обрабатывается, и показать ему значок загрузки, если это необходимо.