SetInterval、SetTimeOut、およびRequestanimationframeでスタックされています

Question

JavaScriptのタイマーがついています。私のsetInterval、setTimeoutメソッドの使い方を読んでてきた悪いです、彼らはページのリフローおよび再描画を引き起こし、代わりに要求アニメーションフレームを使用し

私がこだわっていると我々は

ことを行うことができますどのように良い説明を持つ一つのリソースを見つけることができませんでした

私たちはrequestAnimationFrameのでrequestAnimationFrameのとのsetTimeoutとのsetInterval置き換えることができますか、知りたい

var x = 0; 
 

 
function SayHi() { 
 

 
    console.log("hi"); 
 
    console.log(x); 
 
    ++x 
 
    if (x >= 10) 
 
    clearInterval(intervalid); 
 
} 
 

 
var intervalid = setInterval(SayHi, 10);

どのように我々はREPLすることができますrequestAnimationFrameの持つ上記のコードをエースとどのように我々はそれ

function greetings(){ 
 
console.log("greetings to u"); 
 
} 
 

 
setTimeout(greetings,10);

どのように我々はrequestAnimationFrameのと上記のコードでsetimeoutを置き換えることができますクリアすることができます。

誰かが違いを説明することができた場合、それは大きな助けになるでしょう

おかげ

Answer 1

• のsetTimeout（）はかつて、一定期間後に何かを行います。
• setInterval（）は、各時間の後に何かを繰り返し実行します。
• requestAnimationFrameの（）ブラウザが（再描画するために）"準備完了" であるときに一度何かを行います。

どのように同じですか？

あなたは彼らがすべてしたいことが分かります何かあなたのためです。

どう違うのですか？

基本的な違いは、いつあなたの何かがになることです。 setInterval（）はと同じです。setTimeout（）が繰り返し呼び出されます。一方、requestAnimationFrame（）はのようにsetTimeout（）ですが、システムが（擬似）固定時間の後ではなく、準備ができているときに呼び出されます。

どうrequestAnimationFrameの（）はのsetTimeout（）を置き換えることができますか？

function greetings(timestamp) { 
    console.log("greetings to u"); 
} 
requestAnimationFrame(greetings); 

どうrequestAnimationFrameの（）はのsetInterval（）を置き換えることができますか？

var x = 0; 
function SayHi(timestamp) { 
    console.log(++x); 
    if (x < 10) { 
     window.requestAnimationFrame(SayHi); 
    } 
} 
window.requestAnimationFrame(SayHi); 

これらはあなたのコード例に基づいて、超簡単な例ですが、私はそれはあなたのものの感覚を与える願っています。

また、チェックアウトすることができます：Mozilla docsをrequestAnimationFrameの（）

に