Я считаю, что ваша проблема в том, что вы одновременно запускаете слишком много запросов к серверу.
Я заметил, что вы используете .keyup()
, а затем запускаете запрос AJAX. Это означает, что если бы я набрал имя пользователя Jonathan
, он бы запустил 8 запросов всего за секунду. Это создаст узкое место.
Если вы откроете консоль, вы заметите, что один символ (один запрос) будет работать нормально, введите второй символ после получения ответа от первого и он снова будет работать. Однако быстрый набор и ожидание ответа не будет работать. В консоли вы увидите, что они будут загружаться и загружаться до тех пор, пока не произойдет тайм-аут / что угодно.
Я предлагаю вам уменьшить количество запросов, которые вы запускаете, и запускать запрос только в том случае, если клавиши перестали нажиматься в течение x миллисекунд.
Решение:
Задержка выполнения keyup. Вот чистое решение javascript
, которое я использовал несколько раз и которое работает в моих приложениях. Я упростил его и изменил, чтобы он, надеюсь, работал в вашем случае.
Вы заметите, что вызывается delayKeyupExecution()
, и мы передаем myInput
(в вашем случае это имя пользователя), userNameAjaxCheck
в качестве обратного вызова (это функция, которая будет содержать ваш запрос ajax) и 500
, это количество мс, чтобы задержать его.
// Your username input
var myInput = document.getElementById("username");
function userNameAjaxCheck(params) {
// Your ajax code to check the username
};
// Delay a function from triggering
function delayKeyupExecution(input, callback, delay) {
var timer = null;
var params = null; // Anything you want to pass to the callback function (userNameAjaxCheck)
input.onkeypress = function() { // Equivalent to your .keyup
if (timer) window.clearTimeout(timer);
timer = window.setTimeout( function() {
timer = null;
callback(params); // Pass the params you need
}, delay );
};
input = null;
};
// Execute
delayKeyupExecution(myInput, userNameAjaxCheck, 500);