jQuery/Javascript乱数アニメーション

Question

6つの数字が1つずつ生成されるアニメーションを作成しようとしています。しかし、私はそれに問題があります。私はここからコードを使用しています http://jsfiddle.net/ZDsMa/1/

しかし、私はループを一時停止するようには思えません。これは私のコードです。それでは、私がやろうとしているが、それは54などを生成後、完了するのを待って、上記の例のように12を生成している...私は本当にこのかかわらずに苦しんだ

var numbers = [12,54,32,45,21,69,20]; 
for (var i = 0; i < (numbers.length + 1); i++) { 
    var duration = 2000; 
    var desired = numbers[i]; 

    output = $('#' + i); 
    started = new Date().getTime(); 

    animationTimer = setInterval(function() { 
     if (output.text().trim() === desired || new Date().getTime() - started > duration) { 

     } else { 
      output.text(
       '' + 
       Math.floor(Math.random() * 10) + 
       Math.floor(Math.random() * 10) 
      ); 
     } 
    }, 100); 
} 

...いくつかの助けを大好きです:)

Answer 1

あなたが意図したとおりのコードの仕事を持つように固定する必要がある複数の問題があります。

1. などがpie3636はすでに説明済みです。clearInterval(animationTimer)に電話する必要がありますそれを停止したい。

2. 最初の終了後に次の番号を生成できるようにするには、以前の繰り返しが終了したときに呼び出すことのできるループではなく、関数で世代をラップします。

3. 私のコメントで述べたように、要素IDは文字で始める必要があります。

4. 持続時間のために発電機が停止したとき、希望するものの代わりに乱数が出力されます。

   あなたはジェネレータは、常に、全期間続く区間のコード内のif文からoutput.text().trim() === desired ||を削除したい場合は

   var numbers = [12, 54, 32, 45, 21, 69, 20]; 
    
   function generateNumber(index) { 
    
       var desired = numbers[index]; 
    
       var duration = 2000; 
    
   
    
       var output = $('#output' + index); // Start ID with letter 
    
       var started = new Date().getTime(); 
    
   
    
       animationTimer = setInterval(function() { 
    
       if (output.text().trim() === desired || new Date().getTime() - started > duration) { 
    
        clearInterval(animationTimer); // Stop the loop 
    
        output.text(desired); // Print desired number in case it stopped at a different one due to duration expiration 
    
        generateNumber(index + 1); 
    
       } else { 
    
        output.text(
    
        '' + 
    
        Math.floor(Math.random() * 10) + 
    
        Math.floor(Math.random() * 10) 
    
       ); 
    
       } 
    
       }, 100); 
    
   } 
    
   
    
   generateNumber(0);

   .output { 
    
       margin: 20px; 
    
       padding: 20px; 
    
       background: gray; 
    
       border-radius: 10px; 
    
       font-size: 80px; 
    
       width: 80px; 
    
       color: white; 
    
       float: left; 
    
   }

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   
    
   <div class="output" id="output0">--</div> 
    
   <div class="output" id="output1">--</div> 
    
   <div class="output" id="output2">--</div>

。

Answer 2

値にsetIntervalを作成すると、それが指し示す関数が定期的かつ無期限に実行されます。それを停止するには、clearInterval(animationTimer)に電話する必要があります。

可能なコードこれを行うには、次のようになります。

var numbers = [12,54,32,45,21,69,20]; 
for (var i = 0; i < (numbers.length + 1); i++) { 
    var duration = 2000; 
    var desired = numbers[i]; 

    output = $('#' + i); 
    started = new Date().getTime(); 

    animationTimer = setInterval(function() { 
     if (output.text().trim() === desired || new Date().getTime() - started > duration) { 
      clearInterval(animationTimer); // Stops the loop 
     } else { 
      output.text(
       '' + 
       Math.floor(Math.random() * 10) + 
       Math.floor(Math.random() * 10) 
      ); 
     } 
    }, 100); 

    // Stops the animation after one second 
    setTimeout(function() { clearInterval(animationTimer); }, 1000); 
} 

Answer 3

私はsetInterval上setTimeoutを好むだろう。
ここで説明する理由：setTimeout or setInterval

var numbers = [12, 54, 32, 45, 21, 69, 20]; 
 

 
function printNumbers(numbersToPrint) { 
 
    $("#output").text(numbersToPrint.shift()); 
 

 
    if (numbersToPrint.length) { 
 
    setTimeout(function() { 
 
     printNumbers(numbersToPrint); 
 
    }, 500) 
 
    } 
 
} 
 

 
printNumbers(numbers.slice()); 
 
// printNumbers changes the passed array. 
 
// numbers.slice() "clones" the array so "numbers" will be unchanged

#output { 
 
    margin: 20px; 
 
    padding: 20px; 
 
    background: gray; 
 
    border-radius: 10px; 
 
    font-size: 80px; 
 
    width: 80px; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="output">--</div>