Как прервать уже запущенные ajax запросы?

Question

[Принц Датский]

Добрый день. в составе веб-приложения есть небольшой фреймворк для работы с api.
выглядит примерно так:

function makeRequest(json,action,callback) {
	// Проверка на валидность, если не валиден - пробуем еще раз завернуть в JSON
	if (IsJsonString(json)) {
		json = JSON.stringify(json);
	} 
	if (IsJsonString(json)) { //Если снова не json
		console.log('Error in input-data! Cant make json to send');
		return false;
	} else {
		console.log(json);
		//отправка с указанием версии API и ключом (хранится в сессии)
		$.ajax({
			url: '?page=api.api.splash&v=2.0&apikey='+$('#apikey').attr('key'), // скрипт 
			type: 'POST',
			data: {'json': json
					},
			beforeSend: function() {
				$('#placeholder_for_loadingbar').fadeIn(100); // в этом плэйсхолдере уведомление о действии
			},
			success: function(response) {
					$('#placeholder_for_loadingbar').fadeOut();								
					var data = JSON.parse(response);
					if (data['type'] == 'fault' || !data['type']) {
					console.log('error! '+data['message']);
					return false;
					} else {
						console.log('request success');
						action(data['data']);
						if (callback) {
							callback(data['callback']);
						}
					}
			}
		});
		
	};
	
}

Обратите внимание, Есть некое кастомное действие, которое выполняется при success с передачей туда аргумента в виде параметра

console.log('request success');
(data['data']);

В моем случае это функция поиска проектов по названию

$('.my-selector-input').keyup(function(){
        var data = {'statement':'service','method':'selector','data':{'query':$(this).val(),'table':$(this).attr('table'),'cell':$(this).attr('cell'),'cell_id':$(this).attr('cell_id'),'caller':$(this).attr('id')}};
        makeRequest(data,selectorVariant);
    });

Собственно, функция

function selectorVariant(data) {
    if (data !== 'false' && data && data !== '' && data !== null) {
        var classOf = data[0]['caller']+'-variants';
        $('.'+classOf).remove();
        for (var key in data) {
            $('<span class="btn btn-xs btn-default selector-variants '+classOf+'" item_id="'+data[key]['id']+'" target="'+data[key]['caller']+'" caller="'+data[key]['caller']+'">'+data[key]['title']+'</span>').insertAfter($('#'+data[key]['caller']));
        }
    } else {
         $('.selector-variants').remove();
    }
    
}

Собственно проблема! Существует обработчик онклик

$('.with-selector').on('click','.selector-variants',function(){
       $('#'+$(this).attr('caller')).val($(this).text());
       $('#'+$(this).attr('caller')).addClass('has-success');
       $('.selector-variant-selected-hidden').remove();
       $('<input type="hidden" class="selector-variant-selected-hidden" id="'+$(this).attr('target')+'-caller" name="'+$(this).attr('target')+'-caller" value="'+$(this).attr('item_id')+'">').insertAfter($('#'+$(this).attr('caller')));
       $('.selector-variants').remove();
       $('.unset-disable').removeAttr('disabled');
    });

И надо бы, если этот онклик происходит останавливать все запросы, которые инициированы обработчиком my-selector-input по keyUp (блок выше). Ибо происходит следующее: Таблица в базе большая, запрос возвращается довольно долго, и часто возникает ситуация, когда вариант уже выбран, а запросы продолжают возвращаться, и снова возникают варианты.
Это один из примеров. В целом, хотелось бы понимать каким способом можно прерывать запросы функции, которая вызвана чем то, что не связано с событием, корторое должно их прерывать.

Answer 1

[Exploding]

request = $.ajax(.......);

//и вдруг надумали прервать
request.abort();

Comments

[Принц Датский]

обратите внимание, что вызов и прерывание должно происходить из разных локальных мест. Про аборт я в курсе, здесь его не впихнуть так просто.
а именно - request возникает в функции makeRequest. Она в свою очередь запращивается из одного обработчика, а прерывать нужно другим.

[Exploding]

pezdatskiy:
А ежели так как-то исхитриться?))

var request;

function makeRequest(json,action, request,callback){
request = $.ajax(....);
}


$('.with-selector').on('click','.selector-variants',function(e, request){
//и вдруг надумали прервать
request.abort();
}

[Принц Датский]

Exploding: ежели будет работать, чего бы нет?)
Щас попробую.

[Принц Датский]

Exploding: это прелестно. Только есть еще один нюанс. Если вызовов будет несколько из разных мест - мы можем остановить не тот. Нельзя ли вот этот request сделать массивом - с ключем в виде названия вызывающей функции?

[Exploding]

pezdatskiy: Та можно ж наверно, чего ж нельзя... Я не пробовал никогда конечно... Но что тут запрещенного))

[Принц Датский]

Exploding: проблема с глобальной и локальной видимостью. Чего то не работает...((

[Exploding]

pezdatskiy: Всмысле, переменной работает, а массивом нет чтоли? оО

[Принц Датский]

Exploding: в нашем случае реквест это объект

[Exploding]

pezdatskiy: Ну сам реквест то объект, но я так и не понял на чем рухнула вся затея?)

[Принц Датский]

Exploding: на текущий момент на том, что есть несколько js, которые подгружаются. И события ready в каждом свои. Снова проблема с областью видимости.

[Exploding]

pezdatskiy: Ну поидее если мы подгружаем данные на страницу, и в них содержится jq, то их не обязательно оборчивать в обработчик докум.реди...
Хотя сам оборачиваю, но по-моему код без него отлично работает, ведь библиотека подключена и готова уже давно. Или там какой то нюанс был... По-моему события не нужно оборачивать в реди, а другие инструкции нужно. Забыл вобщем, но попробуйте эти варианты, поидее это должно благотворно сказаться на шелковистости волос Уммы Турман))))