[JavaScript]ajax通信の重複を回避する方法

#ajax通信の重複を回避するには

ajax()によって非同期通信をする時、イベントが発生するたびに同じ値を取得する方法を説明していきます。
まず下記のコードを見てください

ajax.js

$('html要素').on('keyup', function(){
		var input = $(this).val();

		$.ajax({
	        type: 'GET',
		url: url,
		data: { keyword: input },
		dataType: 'json'
		})
        .done(function(data) {
          //処理
        })
        .fail(function() {
        //処理
        });

                

このようにキーが押されるたびにajax通信によって処理が行われるコードがあります。
ただしこの場合押されるたびに通信してしますので取得するデータが同じデータの場合重複して取得することになります。

それを防ぐのがjqxhrオブジェクトです。
これはajax通信をする前にjqxhrオブジェクトを判定しオブジェクトが存在する場合はajax通信を実行しません。
これによりデータの取得の重複を伏せづことができます。

ajax.js

var jqxhr; //追記部分
$('html要素').on('keyup', function(){
		var input = $(this).val(); 
		if (jqxhr){        //追記部分
			return;
		}

		jqxhr = $.ajax({  //追記部分
	        type: 'GET',
		    url: url,
		    data: { keyword: input },
		    dataType: 'json'
		})
        .done(function(data) {
          //処理
        })
        .fail(function() {
        //処理
        });

                

このように記述することによりキーを押した時jqxhrオブジェクトの判定が行われ、オブジェクトがあれば実行しません。
オブジェクトが返ってくるまではajax通信を行いますので１回だけ通信するわけではないのでご注意を。