javascript - Safari 浏览器在 window.location 之后停止 js 执行

Question

我有 js 代码，它在单击按钮时显示(假)进度条。与设置超时相比，它会改变进度条的值

 $(".quickbook-btn").click(function(){
   $(".progress").removeClass('hide')
   setTimeout(barAnim, 50);
   window.location = path
 });

 var value = 0;
 function barAnim(){
   value += 5;
   $( ".progress-bar" ).css( "width", value + "%" ).attr( "aria-valuenow", value );
   $(".progress-bar").text((value)+'%');
   if ( value == 10 || value == 20 || value == 30|| value == 50 || value == 75 || value == 90 ) {
     return setTimeout(barAnim, 1500);
   }
 }

它在 Chrome、Firefox 等中完美运行。

但是当涉及到 Safari 时，它会在到达 window.location 行时停止 js 执行。

我什至测试过它，让reach进度达到50%，然后调用window.location，它会立即停止执行js，尽管window.location中的url需要10多秒才能完成。

这里有什么问题吗？为什么 Safari 总是很糟糕

Answer 1

在找不到合适的解决方案后，我将请求转移到 ajax 并在响应时使用 window.location。 (但有一点是肯定的，Safari 很糟糕)

$(".quickbook-btn").click(function(){
      $(".progress").removeClass('hide')
      setTimeout(barAnim, 50);

      $.ajax({
        method: "GET",
        url: "#{path}",
      }).done(function( data ) {
        $( ".progress-bar" ).css( "width", 100 + "%" ).attr( "aria-valuenow", 100 );
        $(".progress-bar").text((100)+'%');
        window.location = "#{club_quick_books_path}"
      });
    });

    var value = 0;
    function barAnim(){
        value += 5;
        $( ".progress-bar" ).css( "width", value + "%" ).attr( "aria-valuenow", value );
        $(".progress-bar").text((value)+'%');
        if ( value == 10 || value == 20  || value == 30|| value == 50 || value == 75 || value == 90 ) {
            return setTimeout(barAnim, 1500);
        }
        return value >= 95 || setTimeout(barAnim, 50);
    }