Rate Limit Summoner call

by Austin Anderson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="panel panel-default myContainer">


<label>API Key</label>
<input class="form-control" id="theKey" placeholder="API Key" />
<br />
<label>Summoner Name</label>
<input class="form-control" id="summonerName" placeholder="Summoner" value="" />
<br />
<label>Region</label>
<select class="form-control" id="region">
  <option value="br">BR</option>
  <option value="eune">EUNE</option>
  <option value="euw">EUW</option>
  <option value="kr">KR</option>
  <option value="lan">LAN</option>
  <option value="las">LAS</option>
  <option value="na" selected>NA</option>
  <option value="oce">OCE</option>
  <option value="ru">RU</option>
  <option value="tr">TR</option>
</select>

<br />
<button id="submitButton" type="submit" class="btn btn-primary btn-sm form-control"  onclick="summonerLookUp();">
    <i id="spinnerIcon"></i> Submit
</button>
<br />
<br />
<div id="information">
  <label>timer: </label>
  <div>
    <span id="timer">0</span>
    <span> seconds</span>
  </div>
  <label>requests: </label>
  <div id="requests"></div>
</div>
<br />
<div id="results"></div>
</div>

CSS

.alert {
    margin-bottom: 5px;
    padding: 5px 15px;
    width: 450px;
}
label {
  display: block;
}
input, .btn, select {
  width: 450px;
}

#information label {
  display: inline-block;
}

#information div {
  width: 100px;
  display: inline-block;
}

.myContainer {
  padding: 10px;
  width: 470px;
}

input:hover, select:hover {
  cursor: pointer;
}

JavaScript

var API_KEY, REGION, SUMMONER_NAME, SUMMONER_NAME_CONCAT, REAL_SUMMONER_NAME, SUMMONER_ID, stillProcessing, time;
var baseURL1 = 'https://api.pubg.com/shards/pc-na/';
var baseURL2 = 'players?filter[playerNames]=';

var ERRORS = [];
var $resultDiv = $("#results");
var $timer = $('#timer');
var $requests = $('#requests');

function summonerLookUp() {
    //reset values
    startSpinner();
    SUMMONER_NAME = '';
    API_KEY = '';
    SUMMONER_ID = '';
    ERRORS = '';
    
    //get input values
    API_KEY = $("#theKey").val();
    SUMMONER_NAME = $("#summonerName").val();
    REGION = $("#region").val();
    $resultDiv.html('');
    $timer.html('1');
    $requests.html('0');
    time = 1;
    requestCount = 0;
    
    //no api key detected in the input
    if (!API_KEY.length) {
       ERRORS+='<div class="alert alert-danger">API Key is required</div>';
    }
    
    //no summoner name detected in the input
    if (!SUMMONER_NAME.length) {
       ERRORS+='<div class="alert alert-danger">Summoner Name is required</div>';
    }
    
    //remove whitespaces from summoner name, this is used when we get the summoner name back from our first call.
    //SUMMONER_NAME_CONCAT = SUMMONER_NAME.replace(/ /g,'').toLowerCase();
    
    //if we have errors, show them. If not, begin our request queue.
    if (ERRORS.length) {
       $resultDiv.html(ERRORS);
       stopSpinner();
    } else {
       console.log('Summoner: ' + SUMMONER_NAME + ' (' + SUMMONER_NAME_CONCAT + ')');
       console.log('Region: ' + REGION);
       console.log('KEY: ' + API_KEY);
       ajaxQueue(1);
    }
}

//start our spinner and disable button - to prevent firing multiple requests
function startSpinner() {
   $("#spinnerIcon").addClass("fa fa-spinner fa-spin");
   $("#submitButton").addClass("disabled");
   $("#submitButton").prop("disabled",true);
   stillProcessing = true;
   updateTimer();
}

//re-enable button
function stopSpinner() {
   $("#spinnerIcon").removeClass("fa fa-spinner...