تأخیر در اولین اجرای تابع success در Ajax
با سلام
یک صفحه html به عنوان فرم ثبت نام طراحی شده که شامل یک input از نوع text جهت ورود نام کاربری و یک label برای نمایش وضعیت در دسترس بودن یا نبودن نام کاربری وارد شده است. قرار است که از لحظه ورود کلمه سوم به بعد تابع Ajax فعال بشه و در دسترس بودن یا نبودن نام کاربری وارد شده را در label اعلام کنه. من نمونه کدی را پیدا کردم و با تغییرات جزیی اون را روی فرم برنامه خودم پیاده کردم . این کد فقط یک مشکل داره و اون اینه که وقتی برای اولین بار فرم را اجرا میکنم و سه حرف اول نام کاربری را وارد میکنم (بسته به اینکه فرم با کدام مرورگر اجرا شده باشه) بین 6 تا 10 ثانیه طول میکشه تا مشخص بشه نام کاربری در دسترس هست یا نه .بعد از اولین تعیین وضعیت همه چیز نرمال میشه و دیگه بدون تأخیر وضعیت نمایش داده میشه. حتی اگر فرم را Refresh کنم باز هم سریع وضعیت نام وارد شده مشخص میشه. اما اگر فرم را ببندم و دوباره اجرا کنم مشکل تأخیر دوباره بر میگرده . تاکید می کنم فقط در اولین اجرای تابع مشکل دارم و از اولین اجرا به بعد تا وقتی که فرم بازه مشکلی وجود نداره. کد را میزارم تا عزیزان بررسی کنند ... ممنون
کد HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
document.getElementById("txtUserName").onkeyup = function () {
var userName = document.getElementById("txtUserName").value
if (userName.length >= 3) {
jQuery.ajax(
{
url: 'RegisterationService.asmx/UserNameExists',
method: 'post',
data: { userName: userName },
dataType: 'json',
success: function (data) {
var divElement = document.getElementById('label')
if (data.UserNameInUse) {
document.getElementById('label').innerHTML = userName + ' is in Used'
document.getElementById('label').style.color = 'red'
document.getElementById("txtUserName").style.borderColor = "red"
}
else {
document.getElementById('label').innerHTML = userName + ' is available'
document.getElementById('label').style.color = 'green'
}
},
error: function (err) {
alert(err);
}
});
}
}
});
</script>
</head>
<body>
<input id="txtUserName" style="width:50%" type="text" />
<br />
<div style="height:30px; width:50%;">
<label id="label"></label>
</div>
</body>
</html>
