[解決済み] jQuery AJAXリクエストをキャンセル/中止する方法は？

質問

5秒ごとにAJAXリクエストを行います。しかし、問題はAJAXリクエストの前に、前のリクエストが完了していない場合、そのリクエストを中断し、新しいリクエストをしなければならないことです。

私のコードは以下のようなものですが、この問題を解決するにはどうしたらよいでしょうか？

$(document).ready(
    var fn = function(){
        $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

解決方法は？

jquery ajax メソッドが返すのは XMLHttpRequest オブジェクトを作成します。このオブジェクトを使用すると、リクエストをキャンセルすることができます。

XMLHttpRequestには アボート メソッドは、リクエストをキャンセルしますが、もしリクエストがすでにサーバーに送信されている場合は サーバーはそのリクエストを処理します。 リクエストを中止しても、クライアントはレスポンスを待ったり処理したりしません。

また、xhrオブジェクトには ReadyState これはリクエストの状態 (UNSENT-0, OPENED-1, HEADERS_RECEIVED-2, LOADING-3, DONE-4) を含んでいます。これを利用して、前のリクエストが完了したかどうかをチェックすることができます。

$(document).ready(
    var xhr;
    
    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);