アニメーション終了後のJavaScriptの実行アクション

アニメーションが終了した後でテキストを変更したいが、動作するものを見つけるのが難しい。私はタイマーを試しましたが、それは実際には動作しません。アニメーションの時間は毎回異なります（後でそれを追加しますが、今は毎回同じです）。アニメーション終了後のJavaScriptの実行アクション

$(document).ready(function() { 
 
     $("button").click(function() { 
 
      var r = Math.floor(Math.random() * 2) + 1 
 

 
      var moveTime; 
 
      if (r == '1') { 
 
       moveTime = 5000; 
 
      } else if (r == '2') { 
 
       moveTime = 4900; 
 
      } 
 
      var slowDown = 1000; 
 
      var $div = $('div').css('left', 0); 
 

 
      while (moveTime > 0) { 
 
       slowDown--; 
 
       $div.animate({ 
 
        left: moveTime + "px" 
 
       }, 3000); 
 

 
       if (slowDown > 0) { 
 
        slowDown--; 
 
        moveTime = 0; 
 
       } 
 

 
       slowDown--; 
 
       moveTime--; 
 
      } 
 

 
      document.getElementById("timer").innerHTML = r; 
 

 

 
     }); 
 

 
    });

div { 
 
     position: absolute; 
 
     float: left; 
 
     margin: 200px 0 0 -8400px; 
 
     width: 10000px; 
 
     height: 125px; 
 
     background: repeating-linear-gradient(90deg, #DF0000, #DF0000 125px, #000000 125px, #000000 250px) 
 
    } 
 
    
 
    h1 { 
 
     text-align: center; 
 
     margin: 130px 0 0 0; 
 
     font-size: 90px; 
 
    } 
 
    
 
    body { 
 
     overflow: hidden; 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <button>Start Animation</button> 
 
    <div></div> 
 
    <h1 id="timer">|</h1> 
 

 
</body>

出典

2016-12-05 Patte

ステップ1を参照してください。 animate' documentation]（http://api.jquery.com/animate）を参照してください。 –

あなたはすべてが解決したときに何かをするPromise.all()を使用し、その後、約束の配列にあなたのアニメーションをマップするためにpromise()メソッドを使用することができます：[ `読む：

var promisesArr = []; 

while (moveTime > 0) { 
    // ... 

    promisesArr.push($div.animate({ 
     left: moveTime + "px" 
    }, 3000).promise()); 

    // ... 
} 

Promise.all(promisesArr).then(function() { 
    var r = Math.floor(Math.random() * 2) + 1 
    document.getElementById("timer").innerHTML = r; 
});

はFiddle

出典

2016-12-05 09:17:38 haim770