Добрый день. в составе веб-приложения есть небольшой фреймворк для работы с 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 (блок выше). Ибо происходит следующее: Таблица в базе большая, запрос возвращается довольно долго, и часто возникает ситуация, когда вариант уже выбран, а запросы продолжают возвращаться, и снова возникают варианты.
Это один из примеров. В целом, хотелось бы понимать каким способом можно прерывать запросы функции, которая вызвана чем то, что не связано с событием, корторое должно их прерывать.
