のsetTimeout - （例えば2秒）カウンタの増加速度は指数関数的に

Question

私は何をしようとしていることは与えられた時間内に一連の数字（例：1-100）をプリントアウトする機能です。超簡単。

最も難しい部分は、シーケンスアニメーションがゆっくりと開始され、が指数関数的に高速化することです。。

var animationLength = 2000; //ms 

var counter = 0, 
    counterEnd = 100, 
    countInterval = animationLength/counterEnd; // 20ms 

function animate() { 
    $('#result').text(counter++); 
    if (counter <= counterEnd) { 

    //Calculate here dynamically newInterval 
    var newInterval = countInterval; 

    countInterval = newInterval; 
    setTimeout(animate, newInterval); 
    } 
} 

animate(); 

---

だから、今countIntervalは常に20msのですが、それは指数関数的に減少する、変数でなければなりません：これは私がこれまで持っているものです。例：

counter = 1; => countInterval = 40ms //not sure about that 
... 
counter = 100; => countInterval = 1ms 

そして、これらの間隔のsummatoryが2000msの

https://jsfiddle.net/fvxf7mby/5/

---

UPDATEすることがあります。@Matsリンドへ

おかげで、私はついに見つけました。 A.Wolfのコメントで述べたフィドルを使用して

var animationLength = 1000; // 1 second 
 
var counter = 0; 
 
var counterEnd = 100; 
 

 
function animate() { 
 
    // Do stuff 
 
    $('#output').text(counter++); 
 
    animationLength *= 0.5; // not exponential - but speed will half on each iteration 
 
    if (counter <= counterEnd) { // Stopping condition 
 
    setTimeout(animate, animationLength); 
 
    } 
 
} 
 

 
animate(); // Starting the "loop"

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

Answer 1

を要求どおりに彼のjsfiddleを編集しました、我々は減少する時間間隔が好きです。指数関数的には、各区間の間に同じ因子で減少しています。

ファクタ1/aを呼び出し、最初の時間間隔をbに設定すると、次の時間間隔はb/a、3番目のb/a^2、n：th b/a ^（n -1）。

Nタイムステップの合計時間は、b *（a-a^- （N-1））/（a-1）（指数級数の合計式）です。 =(a-a^-(N-1))/(a-1)

は、今、私たちは、総時間2000ミリ秒とステップ100の数を知っているし、2つの未知のa、bおよび1つのだけの式を持っています。 b = total_time /（（a-a^- （N-1））/（a-1））を使ってaを設定し、bを与えることができます。より多くの時間を "加速"するには、より高い値を設定する必要があります。結論する：

時間間隔n> 0の間隔の長さ：B/^（N-1）

TOTAL_TIME：この例TOTAL_TIME = 2000ミリ秒

Nに、選択：選択し、この例ではN = 100

：選択し、高い速くあなたはスピードを上げたい

B = TOTAL_TIME /（（AA^- （N-1））/（a-1））。 B = 95.96788204ms、すべてタイムステップを与えるインスタンスA = 1.05ため

試行：

95.96788204 91.39798289 87.04569799 82.90066476 78.95301405 75.19334672 71.61271116 68.20258206 64.95484005 61.86175243 58.9159547 56.11043304 53.43850766 50.89381682 48.47030173 46.16219213 43.9639925 41.87046905 39.87663719 37.97774971 36.16928543 34.44693851 32.8066081 31.24438867 29.75656064 28.33958156 26.99007768 25.70483588 24.48079608 23.31504388 22.2048037 21.14743209 20.14041152 19.1813443 18.26794696 17.39804472 16.5695664 15.78053943 15.02908517 14.31341445 13.63182328 12.98268884 12.36446556 11.77568149 11.21493475 10.68089024 10.17227642 9.687882303 9.226554574 8.787194832 8.368756983 7.970244746 7.590709282 7.229246935 6.884997081 6.557140077 6.244895312 5.947519344 5.664304138 5.394575369 5.137690828 4.8 93038884 4.660037032 4.438130507 4.226790959 4.025515199 3.833823999 3.651260951 3.477391382 3.311801316 3.154096492 3.003901421 2.860858496 2.724627139 2.594882989 2.471317133 2.353635365 2.24155749 2.134816657 2.033158721 1.936341639 1.844134894 1.756318947 1.672684712。376121852 1.31059224 1.248183085 1.188745796 1.132138853 1.078227479 1.026883313 0.977984108 0.931413436 0.887060415 0.844819443 0.804589946 0.766276139

Answer 2

これはsetTimeoutとはるかに簡単になります。時間間隔の速度に反比例して

：ちょうどあなたがMENT

「最も難しい部分」、指数関数的にスピードアップについての数学の質問を見てみると

var counter = 1000; 
 

 
var num = 1; 
 
var myFunction = function(){ 
 
    counter = counter -20; 
 
    
 
    $("#result").html(num); 
 
    num++; 
 
    if(num <=100) 
 
    { 
 
    timeout = setTimeout(myFunction, counter); 
 
    } 
 
} 
 

 
var timeout = setTimeout(myFunction, counter);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="result"> 
 

 
</div>

Answer 3

：それは最終的なコード（JSFIDDLE）

var animationLength = 2000; //ms 

var counter = 0, 
    counterEnd = 100, 
    countInterval = animationLength/counterEnd, // 20 ms, 
    a = 1.05; //speed factor 

var summatory = 0; 

function animate() { 
    $('#result').text(counter++); 
    if (counter <= counterEnd) { 

    //that's the formula: 
    var newInterval = (animationLength-summatory)/((a - Math.pow(a, -(counterEnd-1)))/(a-1)) 

    summatory += newInterval; 
    countInterval = newInterval; 
    setTimeout(animate, newInterval); 
    } else { 
    $('#summatory').text(summatory); //should be 2000 
    } 
} 

animate();