jquery - 取消Ajax请求或取最后一个

Question

我有一个搜索栏，显示输入内容的结果。因此，当用户按下输入中的某个键时，我会发送请求ajax。

但是，如果我的 request 太长而无法加载包含许多元素的大结果(例如 Red )，它会替换我的小而精确的结果(例如 红色小方 block )写在后面。

我需要知道如何在发送新的请求之前取消ajax或如何获取最后一个请求。

<script type="text/javascript">
    var content = $( 'div#result' );

    $( 'input#search' ).keyup( function() {
        $.ajax({
            url: 'jquery/search.php',
            type: 'POST',
            data: $( this ).serialize()
        }).done(function ( data ) {
            content.empty().append(data);
        });
    });
</script>

Answer 1

您可以使用abort()方法，将ajax对象分配给变量并检查变量是否不null参见下面的示例代码

var xhr = null;
 $( 'input#search' ).keyup( function() {
        if(xhr !== null){
             xhr.abort();
             xhr = null;
        }
        xhr = $.ajax({
            url: 'jquery/search.php',
            type: 'POST',
            data: $( this ).serialize()
        }).done(function ( data ) {
            content.empty().append(data);
        });
    });