jQuery ajax加载中断页面时快速单击

Question

我正在处理的页面位于https://www.visaprosolutions.com

它使用jquery和ajax在页面之间进行转换。该代码可以正常工作，除非您快速浏览页面或非常快地按下历史记录后退按钮，否则页面会中断。我将在下面发布导航代码（window.popstate运行与pushstate相同的代码）

    // -----------------navigation click--------------------
    // ----------Home---------
    $('nav > a:nth-of-type(1)').on('click', function (event){
      window.history.pushState('home', '', '/');
      $('.main_content > *').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 > a:nth-of-type(1) > p:first-of-type').addClass('pageonodd');

      $('.active_bg').after('<img src="Assets/background1.png" class="loader_bg">');
      $('.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 > *', function(){
            $('.main_content > *').addClass('riseup');
            $.when($('body').append('<div id="subbox_loader"></div>')).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 > a:nth-of-type(1)').click();
    });

    // ----------VisaTypes---------
    $('nav > a:nth-of-type(2)').on('click', function (event){
      window.history.pushState('visatypes', '', 'visatypes');
      $('.main_content > *').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 > a:nth-of-type(2) > p:first-of-type').addClass('pageoneven');

      $('.active_bg').after('<img src="Assets/background2.png" class="loader_bg fixed_bg">');
      $('.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 > *', function(){
            $('.main_content > *').addClass('riseup');
          });
        });
      });

    });

    // ----------Process---------
    $('nav > a:nth-of-type(3)').on('click', function (event){
      window.history.pushState('process', '', 'process');
      $('.main_content > *').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 > a:nth-of-type(3) > p:first-of-type').addClass('pageonodd')

      $('.active_bg').after('<img src="Assets/background3.png" class="loader_bg">');
      $('.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 > *', function(){
            $('.main_content > *').addClass('riseup');
            $.getScript('/JS/process.js');
          });
        });
      });
    });

    // ----------About---------
    $('nav > a:nth-of-type(4)').on('click', function (event){
      window.history.pushState('about', '', 'about');
      $('.main_content > *').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 > a:nth-of-type(4) > p:first-of-type').addClass('pageoneven')

      $('.active_bg').after('<img src="Assets/background4.png" class="loader_bg">');
      $('.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 > *', function(){
            $('.main_content > *').addClass('riseup');
            $.getScript('/JS/about.js');
          });
        });
      });
    });
    // ----------Contact---------
    $('nav > a:nth-of-type(5)').on('click', function (event){
      window.history.pushState('contact', '', 'contact');
      $('.main_content > *').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 > a:nth-of-type(5) > p:first-of-type').addClass('pageonodd')

      $('.active_bg').after('<img src="Assets/background5.png" class="loader_bg">');
      $('.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 > *', function(){
            $('.main_content > *').addClass('riseup');
            $.getScript('/JS/contact.js');
          });
        });
      });
    });
    // ----------Get Started---------
    $('nav > a:nth-of-type(6)').on('click', function (event){
      window.history.pushState('getstarted', '', 'getstarted');
      $('.main_content > *').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 > a:nth-of-type(6) > p:first-of-type').addClass('pageoneven')

      $('.active_bg').after('<img src="Assets/background6.png" class="loader_bg fixed_bg">');
      $('.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 > *', function(){
            $('.main_content > *').addClass('riseup');
            $.getScript('/JS/getstarted.js');
          });
        });
      });

如果有人对添加修订ID有任何想法，真的很感激！

Answer 1

setTimeout(function(){
  $(".page_css").attr("href", "/CSS/home.css");
}, 400);`enter code here`

尝试超时，因为您的页面无法跟上步调并且无法正确加载CSS

$(".page_css").attr("href", "/CSS/home.css");