クロムとサファリでjavascriptがどのように起こるか

Question

クロムのこのコードは順番に起こりますが、サファリで起こります。同じことが起こり、アニメーションを表示しないでください（サファリでも同じことを示します）

Answer 1

window.onload = function() { 
    $(window).on("click", ".small1", function() { 
    me = this; 
    setTimeout(function() { 
     $(me).addClass("big"); 
    }, 1); 
    window.open("http://google.com", "_self"); 
    }); 

のsetTimeoutは、パラメータとしてミリ秒を要するとしない秒数here、のsetTimeout約セクション

のsetTimeout（）読み取り：関数を呼び出すか、指定されたミリ秒数後に式を評価

...さらに、window.open(..がタイムアウトの終了後に発生するようにするには、setTimeoutの内部にも入れなければなりません。

タイムアウトは、setTimeout内の機能にのみ有効です。 setTimeoutステートメントの後のものはすべて非同期に実行されるため、setTimeout内の関数が起動/終了する前にwindow.openが実行されます。

例えば、以下のようにタイムアウトを1秒に設定し、タイムアウトが切れた後にクラスを変更してウィンドウを開く必要があります。以下

window.onload = function() { 
    $(window).on("click", ".small1", function() { 
    me = this; 
    $(me).addClass("big"); // First gets big, considering that the css has the desired effect in Safari. 
    setTimeout(function() { 
     window.open("http://google.com", "_self"); // Executes now after timeout finishes. 
    }, 1000); // Timeout of one second. 
    }); 

サンプルスニペット：

$(".small").on("click", function() { 
 
    me = this; 
 
    $(me).addClass("big"); 
 
    setTimeout(function(){ 
 
    window.open("http://google.com", "_self");},1000); 
 
});

.big { 
 
    font-size: 150%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="small">myLink</div>