javascript - 减少即时搜索中的 ajax 调用次数

Question

我正在尝试为我的网站创建一个即时搜索下拉列表。除此以外，一切正常。

var timeOut;
$('#search input[name=\'search\']').on('keyup', function(e) {
    // If enter - submit the search field
    if (e.keyCode == 13) {
        $('header input[name=\'search\']').parent().find('button').trigger('click');
    }
    // Call only when length is at least 2 and the key pressed is alphanumeric
    else if ($('#search input[name=\'search\']').val().length>2 && ((e.keyCode>=65 && e.keyCode<=90) || (e.keyCode>=97 && e.keyCode<=122))) {
        timeOut = null;
        //alert(timeOut);

        if (!timeOut) {
            timeOut = setTimeout(function() {
                $.ajax({
                    url: 'ajax.php',
                    type: 'post',
                    async: false,
                    data:  'ACTION=SEARCH&search='+$('#search input[name=\'search\']').val(),
                    dataType: 'json',
                    beforeSend: function() {
                        $('#loader-icon').show();
                    },
                    complete: function() {
                        $('#loader-icon').hide();
                    },
                    success: function(json) {
                        //$('.product-list-row').html(json);
                        $('#search-listing').html(json['html']);
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
                timeOut = null;
            }, 500);
        }
    }
});

问题 1:由于某些原因 setTimeOut 没有像我预期的那样工作，我的脚本最终对服务器进行了太多次调用。 Ajax 调用应该只在用户完成输入或类似操作时进行，而不是在每次按键时进行。

问题 2:由于某种原因，当我快速键入时，输入栏没有得到编辑。然而，ajax 有效，但使用的是最后的文本输入。

Answer 1

您可以使用 jqXHR 中止之前的调用，而不是尝试使用 setTimeout 来解决这个问题。 AJAX 返回的对象。使用它更加干净和简单。也删除 async: false,。

var timeOut;
var xhr;
$('#search input[name=\'search\']').on('keyup', function(e) {
    // If enter - submit the search field
    if (e.keyCode == 13) {
        $('header input[name=\'search\']').parent().find('button').trigger('click');
    }
    // Call only when length is at least 2 and the key pressed is alphanumeric
    else if ($('#search input[name=\'search\']').val().length>2 && ((e.keyCode>=65 && e.keyCode<=90) || (e.keyCode>=97 && e.keyCode<=122))) {
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }   
        xhr = $.ajax({
            url: 'ajax.php',
            type: 'post',
            data:  'ACTION=SEARCH&search='+$('#search input[name=\'search\']').val(),
            dataType: 'json',
            beforeSend: function() {
                $('#loader-icon').show();
            },
            complete: function() {
                $('#loader-icon').hide();
            },
            success: function(json) {
                //$('.product-list-row').html(json);
                $('#search-listing').html(json['html']);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    }
});