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

Posted 2021-05-02

我有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。

我甚至测试过它，让它达到进度达50％并且比调用window.location立即停止执行js，尽管window.location中的url需要10秒以上才能完成。

这是什么问题？为什么野生动物园总是糟透了

答案

在找不到合适的解决方案之后，我将我的请求转移到了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);
    }