Question

我有这个脚本，并且有一个非常明显的1-2秒延迟来改变文本框周围的边框颜色（has-success）或（has-error）。基本上我想改变颜色（绿色或红色）并根据if / else语句显示/隐藏一个glyphicon。

$(document).ready(function () {
    $("#lookupExtGuest").click(function () {
        $.ajax({
            url: "/NewUserRequest/LookupData",
            data: { userInput: document.getElementById("ExtGuestID").value },
            success: function (result) {
                if (result.indexOf("was found") != -1) {
                    var d = document.getElementById("extGuestlookup")
                    d.className = d.className + " has-success"
                    $('#extGuestGlyphiconOK').show();
                    $('#extGuestGlyphiconRemove').hide();
                }
                else {
                    var d = document.getElementById("extGuestlookup")
                    d.className = d.className + " has-error"
                    $('#extGuestGlyphiconOK').hide();
                    $('#extGuestGlyphiconRemove').show();
                }
            }

        });
    });
});

以下是Chrome网络菜单的响应时间：

Answer 1

success函数中的javascript只需几毫秒即可运行，前提是result字符串只有几千字节。测试类似内容的好方法是使用console.time()：

<script>
$(document).ready(function () {
    $("#lookupExtGuest").click(function () {
        console.time('lookupDataRequestTimer');

        $.ajax({
            url: "/NewUserRequest/LookupData",
            data: { userInput: document.getElementById("ExtGuestID").value },
            success: function (result) {
                console.timeEnd('lookupDataRequestTimer');

                console.time('lookupDataCallbackTimer');

                if (result.indexOf("was found") != -1) {
                    var d = document.getElementById("extGuestlookup")
                    d.className = d.className + " has-success"
                    $('#extGuestGlyphiconOK').show();
                    $('#extGuestGlyphiconRemove').hide();
                }
                else {
                    var d = document.getElementById("extGuestlookup")
                    d.className = d.className + " has-error"
                    $('#extGuestGlyphiconOK').hide();
                    $('#extGuestGlyphiconRemove').show();
                }

                console.timeEnd('lookupDataCallbackTimer');
            }

        });
    });
});
</script>

我已在您发布的代码中添加了一些console.time个函数。如果你运行它，你应该在web-inspector的控制台中看到时间。通过这种方式，您可以查看ajax调用（lookupDataRequestTimer）或成功回调（lookupDataCallbackTimer）是否较慢以及减少了多少。

如果ajax调用速度慢得多且请求的文件太大（我怀疑），你可能会发现服务器速度很慢。为了加快速度，您可以在页面加载时运行GET请求，并将数据缓存到变量中，并在单击时立即访问它。

编辑：我看到你刚刚添加了网络截图。请求的大小非常小，为590b，但它需要2.47秒。这绝对是需要一段时间才能响应的服务器。您可以拍摄整个网络标签的另一张照片，包括html页面本身的时间。

Answer 2

也许您可以为每个节点使用('#parent').append('<element><\element>')然后slow。

或者，隐藏hide('slow')：

show('slow')或var query = from client in db.Clients from policy in client.Policies_Property where policy.CovertTo >= ConvertToStart && policy.ConverTo <= ConverToEnd && client.Client_Details_Legacy != null select new { client.Client_Details_Legacy.FullName, client.Client_Details_Legacy.AddressLine1, client.Client_Details_Legacy.AddressLine2, client.Client_Details_Legacy.AddressLine3, policy.PolicyNumber, policy.CoverTo, client.Id };

为什么这个Jquery / JavasScript这么慢？

2 个答案: