0

当我浏览时，在 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. 智能填充框将列出附加值（作为列表）

当我在文本框中缓慢输入时工作正常。
但是当我在文本框中快速输入时，smartfill 数据会列出 2/3 次。
ajax 调用函数绑定到 'onkeyup' 事件。

4

2 回答 2

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/

于 2013-08-13T14:17:24.623 回答
0

您可以有一个标志，指示在最后一个完成之前不应启动新的 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;
       }
   }
});

未经测试，如果我的牙套脱落了，请见谅。

于 2013-08-13T13:54:12.663 回答