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

Question

我有一个搜索栏,显示来自内容的结果input.因此,当用户按下一个键时,我发送一个request ajaxinput.

但是,如果我request的时间太长而无法加载具有许多元素的大结果(例如Red),那么它会重新填充我的小而精确的结果(如Red Small Square).

我需要知道如何ajax在发送新内容之前取消a request或如何取消最后一个.

<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);
        });
    });