2012-01-27 7 views
7

序文:私の個人的なサイトにdemo of the problemがあります(これは大丈夫ですが、そうでなければjsfiddleで設定しようと思います)。私はこの質問を少し楽しくなるようにしようとしていますが、また、JavaScriptの時間関数を理解しようとしています。setTimout関数を同じ速度で実行させるにはどうすればよいですか?

タイムアウト時にプログレスバーの値を増やしています。理想的には(関数が瞬間的に実行される場合)、それらは同じ速度で塗りつぶすべきですが、実際の世界ではそうではありません。このコードは次のとおりです。

function setProgress(bar, myPer) { 
bar.progressbar({ value: myPer }) 
    .children('.ui-progressbar-value') 
     .html(myPer.toPrecision(3) + '%') 
      .attr('align', 'center'); 
    myPer++; 
    if(myPer == 100) { myPer = 0; } 
} 

function moveProgress(bar, myPer, inc, delay){ 
    setProgress(bar, myPer); 
    if(myPer >= 100) { myPer = 0; } 
    setTimeout(function() { moveProgress(bar, myPer+inc, inc, delay); }, delay); 
} 

$(function() { 
    moveProgress($(".progressBar#bar1"), 0, 1, 500); 
    moveProgress($(".progressBar#bar2"), 0, 1, 500); 
    moveProgress($(".progressBar#bar3"), 0, .1, 50); 
    moveProgress($(".progressBar#bar4"), 0, .01, 5);    
}); 

ネイティブに、同じスピードですべてを実行する必要があると思います。

しかし、最初の2つのバー(「プログレスバーの設定」を1回の操作と呼びます)では、500ミリ秒ごとに1回の操作を行い、合計500回の操作でバーを満たします。 3つ目は50ミリ秒ごとに1回の操作を行い、合計5,000回の操作でバーを埋めることです。 4回目には5msごとに1回の操作を実行しており、合計5万回の操作でバーを埋めることができます。

私のコードのどの部分が最も長くかかるのですか?これらのスピードの違いがあり、それらが機能するように変更することができます(4番目のバーは少しずつ増加します)。同じスピードですか?

+0

私がこの権利を見ていると、サンプルサイトではラベルがオフになっています。 Isnt '4th bar .01 5msごとに? –

+0

@JamesMontagne whoops。ありがとう。一定。 – xdumaine

+0

'setTimeout'コールの遅延は最小値にクランプされることに注意してください。 html5ブラウザ(およびChrome)では4msですが、ブラウザによって異なります。すなわち、10msのようなより大きな値にクランプすることができる。 –

答えて

3

setTimeoutを使用した場合の最大の問題は、コード実行がタイムアウトの間に発生し、setTimeoutに送信された値に含まれていないことです。あなたの遅延が5ミリ秒で、あなたのコードが実行に5ミリ秒かかった場合、本質的にあなたの時間は2倍になります。

タイムアウトが発生すると、別のコードが既に実行されている場合は、実行が遅れて終了するまで待つ必要があります。

これは時計やストップウォッチにsetTimeoutを使用しようとすると、人々が抱える問題点に非常に似ています。解決策は、現在の時刻とプログラムの開始時刻を比較し、それに基づいて時刻を計算することです。あなたは何か似たようなことができます。開始してからどれぐらいの時間が経過したかを確認し、それに基づいて%を設定します。

+0

ああ、バーは始まってからの時間が増えているので、バーは一定の割合で増分しているように見えますが、毎回新しい計算が行われるので、キューに入れられた遅延や操作に時間がかかることはありませんか? – xdumaine

+0

基本的に。非常に短い時間でわずかに同期が外れることもありますが、次にタイムアウトが発生したときはいつもすぐに戻ってきます。 –

+0

これは実験のようなものだとわかりますが、これが実際の状況であれば、おそらく1つのタイマーが必要になり、同じ実行で4つをすべて更新することになります。それからあなたはいつも同期しています。 –

0

スピードの違いは2つあります。まず、下のバーを埋めるためにコードを実行していることです(第2段落から最後の段落で説明しています)。また、タイムアウトを設定するたびに、ブラウザがキューをキューに入れます。実際の遅延は、キューの量に応じて指定した時間より長くなることがあります(MDN on window.setTimeout参照)。

0

質問を愛し、私は非常に正確な答えを持っていますが、ここで私の2セントですありません。

Javascriptがそれのイベントループと非常によく扱う非常に高速言語であるため、朝食にsetTimeoutsとsetIntervalsを食べます。
制限はありますが、ブラウザやコンピュータの速度、イベントループでの機能の量、実行するコードの複雑さ、タイムアウト値などの多数の要素に依存します。

この場合、500msごとに1つの関数を実行しようとすると、50msごとに実行するよりも優れた動作をするため、5msごとにはるかに優れていることは明らかです。お互いの上でそれらを実行していることを考慮すると、パフォーマンスが最適ではないと予測できます。

あなたはこの練習を試すことができます:
500ミリメートルを取って、それを単独で実行してください。バーを埋めるために要した合計時間をマークします(ここでは予測よりも少し時間がかかることがわかります)。
同時に500msのタイムアウトを2回実行してみて、合計時間がちょっと長くなったことを確認してください。
これに50msを追加してから5msを追加すると、毎回パフォーマンスが低下することがわかります...

関連する問題