【jQuery】ajax処理実行中に再度ajaxを実行する際に前の処理を中断させる方法

jQueryで$.ajaxを実行する際に、実行中の非同期処理をストップして再度同じ処理を実行させる方法を紹介する。

ボタンクリックで$.ajaxの処理を実行する例で見ていこう。

var req;

$('.btn').on('click', function(){
    if(req) req.abort();
    req = $.ajax({
        // Code...
    });
});

$.ajaxはjqXHRオブジェクトを返す関数なので、返り値を変数にセットするようにする。

次回のボタンクリック時、変数にjzXHRオブジェクトが存在すればabort()メソッドで処理を中断させ、再び$.ajaxを実行させれば良い。