Question

我想要在我的HTML页面中，我将input标记作为“用户名”，并将label标记作为结果。我想在label标签中显示该用户名可用于注册过程的情况。我搜索并找到了用于此目的的食物代码。此代码对每个事物都有利，但有一个问题。在此代码中，如果输入的用户名长度大于3，则AJAX将运行，并且存在可用状态。该用户名将显示在label标记中。问题是，自AJAX启动以来，有6秒的延迟才显示标签中的情况。此延迟仅适用于AJAX的首次运行，此后的一切将是正常的。我的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>

Answer 1

真正快速地在2个浏览器（例如Chrome和Firefox）中打开页面，确保两个页面都“新鲜”。

现在其中一个运行键入测试。需要6秒，对吧？

立即在第二个浏览器中进行测试，仍然需要6秒钟？

我的猜测是第二次很快。可能是由于Shilly提到的原因（缓存，服务器旋转）。如果仍然很慢，则服务器上可能会有会话启动延迟，该会话会在用户验证和/或授权给端点时初始化用户。这可能会进入数据库，从本地Active Directory中提取数据，等等。如果是这样，请查看该身份验证过程中是否发生了一些时髦的事情。 6秒真的很长。

此外，正如Juan提到的那样，您应该在输入中添加一个称为“反跳”的内容，因此只有在用户停止输入设置的时间（例如0.5秒）时，它才会触发ajax请求。 This library will help。

Ajax成功功能下定义的功能运行的延迟

1 个答案: