title: jquery ajax load breaking page on rapid click
body: <p>the page im working on is live at <a href="https://www.visaprosolutions.com" rel="nofollow noreferrer">https://www.visaprosolutions.com</a></p>
  
  <p>it uses jquery and ajax to transition between pages. The code works fine except if you click through the pages very rapidly or press the history back button very rapidly the page breaks. I will post the code for the navigation below (the window.popstate runs the same code except for the pushstate)</p>
  
  <pre><code>    // -----------------navigation click--------------------
      // ----------Home---------
      $('nav &gt; a:nth-of-type(1)').on('click', function (event){
        window.history.pushState('home', '', '/');
        $('.main_content &gt; *').removeClass('riseup').addClass('sinkdown');
        setTimeout(function(){
          $(".page_css").attr("href", "/CSS/home.css");
        }, 400);
  
        if ( $('body').hasClass('pagegrid') ){
          $('body').removeClass('pagegrid');
          $('body').addClass('homegrid');
          $('index.php .subbox').insertAfter('.main_content');
        }
        $('.subbox').remove();
  
        $('.navilist').removeClass('pageonodd pageoneven');
        $('nav &gt; a:nth-of-type(1) &gt; p:first-of-type').addClass('pageonodd');
  
        $('.active_bg').after('&lt;img src="Assets/background1.png" class="loader_bg"&gt;');
        $('.loader_bg').on('load', function() {
          $('.active_bg').animate({opacity: '0'}, 300, function(){
            $('.active_bg').remove();
            $('.loader_bg').addClass('active_bg').removeClass('loader_bg');
  
            $('.main_content').load('index.php .main_content &gt; *', function(){
              $('.main_content &gt; *').addClass('riseup');
              $.when($('body').append('&lt;div id="subbox_loader"&gt;&lt;/div&gt;')).done(function() {
                $('#subbox_loader').load('index.php .subbox', function() {
                  $('.subbox').unwrap();
                  $.getScript('/JS/home.js');
                });
              });
            });
          });
        });
      });
      // -----homebtn click on headerlogo click----
      $('#headerlogo').on('click', function(event) {
        event.preventDefault();
        $('nav &gt; a:nth-of-type(1)').click();
      });
  
      // ----------VisaTypes---------
      $('nav &gt; a:nth-of-type(2)').on('click', function (event){
        window.history.pushState('visatypes', '', 'visatypes');
        $('.main_content &gt; *').removeClass('riseup').addClass('sinkdown');
        setTimeout(function(){
          $(".page_css").attr("href", "/CSS/visatypes.css");
        }, 400);
  
        if ( $('body').hasClass('homegrid') ){
          $('body').removeClass('homegrid');
          $('body').addClass('pagegrid');
          $('.subbox').remove();
        }
  
        $('.navilist').removeClass('pageonodd pageoneven');
        $('nav &gt; a:nth-of-type(2) &gt; p:first-of-type').addClass('pageoneven');
  
        $('.active_bg').after('&lt;img src="Assets/background2.png" class="loader_bg fixed_bg"&gt;');
        $('.loader_bg').on('load', function() {
          $('.active_bg').animate({opacity: '0'}, 300, function(){
            $('.active_bg').remove();
            $('.loader_bg').addClass('active_bg').removeClass('loader_bg');
  
  
            $('.main_content').load('visatypes.php .main_content &gt; *', function(){
              $('.main_content &gt; *').addClass('riseup');
            });
          });
        });
  
      });
  
      // ----------Process---------
      $('nav &gt; a:nth-of-type(3)').on('click', function (event){
        window.history.pushState('process', '', 'process');
        $('.main_content &gt; *').removeClass('riseup').addClass('sinkdown');
        setTimeout(function(){
          $(".page_css").attr("href", "/CSS/process.css");
        }, 400);
  
        if ( $('body').hasClass('homegrid') ){
          $('body').removeClass('homegrid');
          $('body').addClass('pagegrid');
          $('.subbox').remove();
        }
  
        $('.navilist').removeClass('pageonodd pageoneven');
        $('nav &gt; a:nth-of-type(3) &gt; p:first-of-type').addClass('pageonodd')
  
        $('.active_bg').after('&lt;img src="Assets/background3.png" class="loader_bg"&gt;');
        $('.loader_bg').on('load', function() {
          $('.active_bg').animate({opacity: '0'}, 300, function(){
            $('.active_bg').remove();
            $('.loader_bg').addClass('active_bg').removeClass('loader_bg');
  
  
            $('.main_content').load('process.php .main_content &gt; *', function(){
              $('.main_content &gt; *').addClass('riseup');
              $.getScript('/JS/process.js');
            });
          });
        });
      });
  
      // ----------About---------
      $('nav &gt; a:nth-of-type(4)').on('click', function (event){
        window.history.pushState('about', '', 'about');
        $('.main_content &gt; *').removeClass('riseup').addClass('sinkdown');
        setTimeout(function(){
          $(".page_css").attr("href", "/CSS/about.css");
        }, 400);
  
        if ( $('body').hasClass('homegrid') ){
          $('body').removeClass('homegrid');
          $('body').addClass('pagegrid');
          $('.subbox').remove();
        }
  
        $('.navilist').removeClass('pageonodd pageoneven');
        $('nav &gt; a:nth-of-type(4) &gt; p:first-of-type').addClass('pageoneven')
  
        $('.active_bg').after('&lt;img src="Assets/background4.png" class="loader_bg"&gt;');
        $('.loader_bg').on('load', function() {
          $('.active_bg').animate({opacity: '0'}, 300, function(){
            $('.active_bg').remove();
            $('.loader_bg').addClass('active_bg').removeClass('loader_bg');
  
  
            $('.main_content').load('about.php .main_content &gt; *', function(){
              $('.main_content &gt; *').addClass('riseup');
              $.getScript('/JS/about.js');
            });
          });
        });
      });
      // ----------Contact---------
      $('nav &gt; a:nth-of-type(5)').on('click', function (event){
        window.history.pushState('contact', '', 'contact');
        $('.main_content &gt; *').removeClass('riseup').addClass('sinkdown');
        setTimeout(function(){
          $(".page_css").attr("href", "/CSS/contact.css");
        }, 400);
  
        if ( $('body').hasClass('homegrid') ){
          $('body').removeClass('homegrid');
          $('body').addClass('pagegrid');
          $('.subbox').remove();
        }
  
        $('.navilist').removeClass('pageonodd pageoneven');
        $('nav &gt; a:nth-of-type(5) &gt; p:first-of-type').addClass('pageonodd')
  
        $('.active_bg').after('&lt;img src="Assets/background5.png" class="loader_bg"&gt;');
        $('.loader_bg').on('load', function() {
          $('.active_bg').animate({opacity: '0'}, 300, function(){
            $('.active_bg').remove();
            $('.loader_bg').addClass('active_bg').removeClass('loader_bg');
  
  
            $('.main_content').load('contact.php .main_content &gt; *', function(){
              $('.main_content &gt; *').addClass('riseup');
              $.getScript('/JS/contact.js');
            });
          });
        });
      });
      // ----------Get Started---------
      $('nav &gt; a:nth-of-type(6)').on('click', function (event){
        window.history.pushState('getstarted', '', 'getstarted');
        $('.main_content &gt; *').removeClass('riseup').addClass('sinkdown');
        setTimeout(function(){
          $(".page_css").attr("href", "/CSS/getstarted.css");
        }, 400);
  
        if ( $('body').hasClass('homegrid') ){
          $('body').removeClass('homegrid');
          $('body').addClass('pagegrid');
          $('.subbox').remove();
        }
  
        $('.navilist').removeClass('pageonodd pageoneven');
        $('nav &gt; a:nth-of-type(6) &gt; p:first-of-type').addClass('pageoneven')
  
        $('.active_bg').after('&lt;img src="Assets/background6.png" class="loader_bg fixed_bg"&gt;');
        $('.loader_bg').on('load', function() {
          $('.active_bg').animate({opacity: '0'}, 300, function(){
            $('.active_bg').remove();
            $('.loader_bg').addClass('active_bg').removeClass('loader_bg');
  
  
            $('.main_content').load('getstarted.php .main_content &gt; *', function(){
              $('.main_content &gt; *').addClass('riseup');
              $.getScript('/JS/getstarted.js');
            });
          });
        });
  </code></pre>
  
  <p>if anyone has any idea on how add a fix id really appreciate it!</p>