I don’t understand, I created the variables before starting every ajax, and now when I click, I want to interrupt them, however, they still work, and there is an error in the console:

Uncaught ReferenceError: apptype is not defined at HTMLDivElement.<anonymous> ((index):54) at HTMLDocument.dispatch (jquery-3.1.1.min.js:3) at HTMLDocument.q.handle (jquery-3.1.1.min.js:3)

Ajax requests:

  jQuery(document).ready(function($) { var getsteamgames, apptype; $(document).on('click', '.suggestedGame', function(event) { // getsteamgames.abort(); // apptype.abort(); //тут должно прервать поиск возможных игр, аджакс запросы и их переменные созданы ниже var appID = $(this).data('appid'), token = $('input[name="_token"]').val(), appName = $(this).text(), imgUrl = 'http://cdn.akamai.steamstatic.com//steam//apps//'+appID+'//header.jpg?t=1456860366'; $('#gameName').val(appName); $('.hidden').addClass('show'); $('.show').removeClass('hidden'); $('.formy').addClass('col-md-8'); $('.formy').removeClass('col-md-12'); $('.suggested').html(''); var urlcheck = $.ajax({ url: '/urlcheck', type: 'post', data: { 'imgUrl': imgUrl, '_token': token, }, }) .done(function(data) { if(data === '1') { $('#gameLogo').attr('src', 'http://cdn.akamai.steamstatic.com//steam//apps//'+appID+'//header.jpg?t=1456860366'); } else { $('#gameLogo').attr('src', 'http://voting/imgs/no_img.jpg'); } }) .fail(function() { console.log("error"); }); }); $(document).on('submit', '#searchForm', function(event) { var gameName = $('#gameName').val(); if( $('#gameLogo').attr('src') == '' && $('#gameName').val().length === 0) { confirm('Введите название игры или ее часть, ожидайте пока поисковик найдет возможные варианты, выбирите его и нажмите "Голосовать".'); event.preventDefault(); } else { confirm('Подтвердите свой выбор за:' + gameName + '?'); location.reload(); } }); }); function getSteamGames(event) { $('.suggested').html(''); $('#gameLogo').attr('src', ''); $('.show').addClass('hidden'); $('.hidden').removeClass('show'); $('.formy').addClass('col-md-12'); $('.formy').removeClass('col-md-8'); var token = $('input[name="_token"]').val(), gameName = $('#gameName').val(); if(gameName.length >= 4) { $('.suggested').html('<div class="spinner"><img src="http://voting/gif/91.gif" alt=""></div>'); //вот етот запрос надо прервать, продолжает советовать даже после выбора getsteamgames = $.ajax({ url: '/getsteamgames', type: 'POST', dataType: 'json', data: { 'gameName': gameName, '_token': token, }, }) .done(function(data) { $('.suggested').html(''); $.each(data, function(index, element) { var gameName = element.name, appID = element.appid; // и этот, смысла нет продолжать проверку, если уже выбор сделан apptype = $.ajax({ url: '/apptype', type: 'POST', dataType: 'json', data: { 'appID': appID, '_token': token, }, }) .done(function(isGame) { // console.log(isGame); if(isGame == '1') { $('.suggested').prepend('<div class="suggestedGame label label-info" data-appid="'+appID+'">' + gameName + '</div>'); } }) .fail(function() { console.log("Some error returned."); }); }); }) .fail(function() { console.log("ERROR"); }); } }

HTML:

  <div class="container "> <div class="row"> <div class="panel panel-default"> <div class="panel-heading text-center"> Panel heading without title </div> <div class="panel-body"> <div class="col-md-12"> <div class="col-md-4 hidden"> <img id="gameLogo" class="img-thumbnail" src=""> </div> <div class="col-md-12 formy"> <form action="post" action="" id="searchForm"> {{ csrf_field() }} <span id="selectedGame"></span> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"> <span class="fa fa-gamepad"></span> </div> <input type="text" id="gameName" class="form-control" placeholder="Введите желаемое название игры... (Half-Life)" onkeyup="getSteamGames(event)" autocomplete="off"> <div class="input-group-addon"> <span class="fa fa-search"></span> </div> </div> <div class="suggested"></div> </div> <button class="btn btn-default btn-block" type="submit">Голосовать!</button> </form> </div> </div> </div> <div class="panel-footer text-center"> Panel footer </div> </div> </div> </div>

There is nothing else, that's all.

    1 answer 1

    You have the variables getsteamgames and apptype described inside anonymous functions. They will not be visible outside.

    • And then how to interrupt please tell me? - BonBonSlick
    • The fastest and worst option is to make these variables global. - Mikhail Vaysman
    • and the most correct?) - BonBonSlick
    • To answer this question, I need to know the application architecture and requirements. - Mikhail Vaysman
    • there is nothing special there. A live search for Steam games, the user entered the name of the game from 4+ characters, send inquiries, if the user chose a game from those offered, all ajax must be interrupted, otherwise it continues to search and suggest options for old queries. The site is one-page, we have the code above, HTML and scripts, if you need a badge, I'll post more RnP here, and I can put it on the host. - BonBonSlick