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

0

最後の ajax 呼び出しが完了するまで、新しい 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

        });
      }

}

編集keypress ハンドラーにバインドしているので、代わりに次のようなことを行うことができます:

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 に答える