Question

当我浏览时，在stackoverflow本身，我可以找到这么多的问题。还在问......因为我无法理解。

if ($.trim(location).length > 2) {
    var randomNum = Math.floor(Math.random() * 9999999999999);
    var url = "/mobile/App/GetLocations?noCache=" + randomNum + "&h="
            + location;

    $('#' + smartFillBoxId).empty();
    $('#' + smartFillBoxId).hide();

    $.ajax({
        url:url
    }).done(
            function (data) {
                selectedLocation = htmlData = "";
                var count = 0;
                results = eval('(' + data + ')').results;
                $('#' + smartFillBoxId).show();
                $.each(eval('(' + data + ')').results, function (index, results) {
                    htmlData = formatLocation(results,count);
                    $('#' + smartFillBoxId).append(
                            "<li><a href='#' onclick='addSelectedValue(\""
                                    + elementName + "\",\""
                                    + count + "\",\""
                                    + smartFillBoxId + "\")' >"
                                    + htmlData
                                    + "</a></li>");
                    count++;
                });
            });
}

场景：
1.有一个文本框 2.在文本框中，用户将键入最少3个字符 3. Ajax将以这些字符执行 4.智能填充框将列出附加值（如列表）

当我在文本框中慢慢打字时工作正常但当我在文本框中快速输入时，智能填充数据会列出两到三次。
ajax调用函数绑定到'onkeyup'事件。

Answer 1

它会多次触发，因为你绑定了按键事件，每个事件都会触发ajax。您应该对此进行限制，以防止在用户停止键入之前触发ajax调用。像这样：

var timeoutId = null;
$("#t1").keydown(function () {
    if (timeoutId != null)
        window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(updateIt, 500);
});

function updateIt()
{
    // Do your code here
}

请参阅此小提琴，以获得一个简单的示例：http://jsfiddle.net/2gqZv/

Answer 2

您可以有一个标志，指示在最后一个完成之前不应启动新的ajax调用：

var isFetching = false;

$.ajax({
    url:url
}).done(
        function (data) {
         if(isFetching == false){ //CHECK TO SEE IF WE SHOULD INTERRUPT PREVIOUS AJAX CALL
            isFetching = true; //FLIP FLAG TO ENSURE NO OTHER CALLS INTERFERE
            selectedLocation = htmlData = "";
            var count = 0;
            results = eval('(' + data + ')').results;
            $('#' + smartFillBoxId).show();
            $.each(eval('(' + data + ')').results, function (index, results) {
                htmlData = formatLocation(results,count);
                $('#' + smartFillBoxId).append(
                        "<li><a href='#' onclick='addSelectedValue(\""
                                + elementName + "\",\""
                                + count + "\",\""
                                + smartFillBoxId + "\")' >"
                                + htmlData
                                + "</a></li>");
                count++;
            });

            isFetching = false; //CALL COMPLETED

        });
      }

}

编辑由于您绑定了按键处理程序，您可以执行以下操作：

var isFetching = false;

$('#myelement').keypress(function(){
if(isFetching == false){
    isFetching = true;

    $.ajax({
        url:url
        }).done(
        function (data) {
         //ALL YOUR GLORIOUS CODE
         isFetching == false;
       }
   }
});

未经测试，如果我的牙套已关闭，请道歉。

jQuery - Ajax调用多次

2 个答案: