バグのJavaScriptコード

Question

私はこのプログラムで波のような効果を出そうとしています。 ここにコードがあります。

var l = 74, t = 12; var k = 75, m = 14; 
for (var i = 1; i < 10; i += 3) { 
    for (var j = 0; j < 3; j++) { 
     var x = i + j; 
     $(".s" + x).css({ 
      "left": l + "px", 
      "top": t + "px" 
     }); 
     l -= 50; 
     t += 50; 
    } 
    k += 50; 
    m += 50; 
    l = k; 
    t = m; 
} 
var c = 1, d; 
function wave() { 
    m = 1; 
    for (i = 1; i < 4; i++) { 
     d = i; 
     for (j = 1; j <= d; j++) { 
      $(".s" + c).addClass("active"); 
      $(".s" + c).css({ 
       "animation-delay": c/5 + "s" 
      }); 
      alert(c); 
      if (c != 1) { 
       c += 2; 
      } 
     } 
     m++; 
     c = m; 
    } 
} 
wave(); 

jqueryを使用しています。 コードでアラートを有効にすると、1,2,4,3,5,7 の順番でアニメートされますが、無効にすると、1,2,3,4,5,7

I何が間違っているのか理解できません。だれかがバグとは何かを提案し、どのように対処できますか。そのウィンドウが閉じられるまで

完全なコード https://codepen.io/megatroncoder/pen/oxrPRg

Answer 1

alertは、コードの実行を一時停止します。

警告の代わりにconsole.log(c, c/5);を入力すると、cの値は期待通りですが、計算結果はanimation-delayです。

alertがループの実行を一時停止すると、アニメーションが必要なように動作しているように見えますが、次のアイテムのアニメーションがまだ開始されていないためです（activeクラスを取得できませんでした）。

ループを一時停止するものがない場合、アニメーションは同時に（正確に同じ順序で）開始されますが、遅延が正しくないため、間違った順序で実行されているように見えます。