'Status on AJAX request hanging

I have a button when clicked send an ajax request to fire a PHP function which takes a while for it to complete. I have a timed function that checks the status of the first function. The problem being is that these two have a status of pending, and the function that is on a timer seems to freeze until the first function is completed.

see this image for the devtools

$(document).ready(function() {
  var ripstatus;
  var intervalID;
  $("#ripe_start").click(function() {
    if (ripstatus) return;

    console.log('started');
    $("#ripe_start").addClass("ripe_start_activate");
    $("#ripe_start").removeClass("ripe_clickable");
    getid('ripe_start').innerHTML = 'Initializing';
    ripe_getstatus();
    intervalID = window.setInterval(ripe_getstatus(), 500);
  })

  function ripe_getstatus() {
    console.log('getting number ' + ripstatus);
    $.get('./?ajax=1&callfunction=returnNumScan', function(data) {
      getid('ripe_start').innerHTML = data + ' file(s) left to organize';
    });
  }

  $('#ripe_start').on('transitionend webkitTransitionEnd oTransitionEnd', function() {
    console.log('ended');
    doextorg();
  });

  function doextorg() {
    if (ripstatus == 1) return;
    console.log('exc org processing ' + ripstatus);
    ripstatus = 1;
    $.ajax({
      url: "./?ajax=1&callfunction=organize",
      context: document.body
    }).done(function(output) {
      clearinterval(intervalID);
      $("#ripe_start").removeClass("ripe_start_activate");
      getid('ripe_start').innerHTML = 'Complete ' + output + ' File(s) organized';
    });

  } //end function          

});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source