使用文本框的每个 keyup 事件上的 ajax 响应数据构建的动态 Jquery 表，不显示最后一个 ajax 响应的数据（最后一个 keyup）

Question

我正在使用 ajax 根据在文本框中输入的内容来获取表格的行数据。

在我的例子中，pincode 输入“1000”获取 10 个位置行，输入“10007”获取一个行。

下面是js代码

 $('#pincode').keyup(function(event){
    var currentElementId = $(this).attr('id');
    enterlocation = document.getElementById(currentElementId).value;
    var len = enterlocation.length;

    if (len != null && len > 2 && event.which != 8) {
    var lastRequestTimeStamp = new Date().getTime();
        $.ajax({
            type : "GET",
            url : "/abc.htm",
            cache : false,
            contentType : "application/json;charset=utf-8",
            dataType : 'json',
            data : {
                searchKey : enterlocation, lastRequestTimeStampSent : lastRequestTimeStamp},
            beforeSend : function() {
                $("#mytable").remove();
            },
            success : function(response) {
            var locations = response;
            var sentTimeStamp = parseInt(lastRequestTimeStamp, 10);
            var recievedTimestamp = parseInt(locations[0].requestTimeStamp, 10);
                $("#mytable").show();
                var locations = response;

                if (currentElementId == "pincode") {
                    $("#div1").append('<table id="mytable"></table>');
                }
                if (currentElementId == "city") {
                    $("#div2").append('<table id="mytable"></table>');
                }
                if (currentElementId == "street") {
                    $("#div3").append('<table id="mytable"></table>');
                }


                if ((sentTimeStamp == recievedTimestamp) && locations != null && locations.length > 0) {
                    $.each(locations, function(index, location) {
                        var locationRow = '<tr id="locationRowId'+index+'">' +
                        '<td>' +    
                        '<input type= "hidden" id ="hSugAddrLine1'+index+'" name ="hSugAddrLine1'+index+'" value="'+replaceNullwithBlank(location.addressLine1)+'">' +
                        '</td></tr>';

                        if ($("#mytable").children().length == 0) {
                            $("#mytable").append(locationRow);
                        } else {
                            $("#mytable").find('tbody:last').append(locationRow);
                        }
                    });
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert("@Error");
                console.log(textStatus, errorThrown);
            },
            complete : function() {
                $("#mytable").show();
                //$("#mytable").table("refresh");
            }
        });
    }

});

当我在输入框中快速输入 10007 时，我在表格中得到的是大多数情况下 pincode '1000' 的响应数据或某些情况下 pincode '100' 的响应数据。

但是当我在输入文本框中缓慢输入“10007”时，我会在表格中得到正确的 ajax 响应数据，就像输入“10007”一样。

在我看来，呈现缓慢的问题。如前所述，输入“1000”响应数据大于“10007”，所以我认为即使在下一个 ajax 调用响应呈现之后，之前的 ajax 调用更大的数据也会呈现在表上。作为 jquery 和 ajax 的新手和幼稚，我在这里非常头脑风暴。请帮忙！

Answer 1

您调用服务器的速度太快了……每次按键操作。这将导致任何类型的大量使用问题。您可能想要做的是在 keyup 事件发生时设置一个计时器，然后在调用计时器时执行 AJAX 调用。将计时器设置为 1 秒，以便在 1 秒内未按下某个键后，进行呼叫。这将减少额外的调用。

此外，将时间戳 id 分配给服务器返回的带有结果的 ajax 调用也没有什么坏处，这样您就可以只使用最后发送的 AJAX 调用来填充结果。