6

最近、オンラインで次の質問を見つけました。

オブジェクトを受け取り、それを DOM に追加して、イベントが次のティックまでバッファリングされるようにする関数を作成しますか? なぜこれが便利なのか説明してください。

これが私の応答です：

function appendElement(element) {
    setTimeout(function() {
        document.body.appendChild(element);
    }, 0);
}

間隔をゼロに設定したのはなぜですか?

この記事によると、タイムアウトを 0 に設定すると、次のティックまでイベントが遅延します。

func の実行は、最も近いタイマー ティックでイベント キューに移動します。それはすぐではないことに注意してください。次のティックまでアクションは実行されません。

ここに私が確信していないものがあります：

  • 私の解決策は正しいですか？
  • なぜこのアプローチが有益なのか、私には答えられません

参考までに、 8 つの JavaScript インタビューの質問がリストされているこの Web サイトからこの質問を取得しました。

また、私がこの質問をするのは、コード チャレンジ、面接の質問、または宿題の一部としてではなく、私自身の調査と改善のためであることも指摘しておきます。

4

2 に答える 2

6

あなたは質問を誤解していると思います。私はこれを、要素を DOM に追加し、次のティックまでそれ以上の処理を遅らせるように要求していると読みました。したがって：

document.appendChild(element);
setTimeout(function() {
    resumeProgramFlowFromHere();
}, 0);
// nothing here

これは、 (ユーザーに視覚的なフィードバックを提供するために) 時間のかかる操作が行われる前に、リフロー/再描画があることを確認したい場合に便利です。ブラウザーは特定の状況で既に再描画を強制していますが、そうでない場合は、この手法が役立ちます。

詳細については、こちらとこちらをご覧ください。

それが私の質問の解釈ですが、おそらくeventsの意味が明確ではないため、混乱を招くこともあります。そして、そのサイトには他にも議論の余地のある質問があり、最も奇妙なのは次のとおりです。

「オブジェクトとしての関数」の概念とは何ですか? また、これは変数のスコープにどのように影響しますか?

それは私にはまったく意味がありません。関数は JavaScript のオブジェクトであり、スコープも関数に関連していますが、それらは別のトピックです。関数がオブジェクトであるという事実は、スコープとは何の関係もありません。

ですから、私のアドバイスは、これらの面接の質問は、一粒の塩分で受け取ることです。

于 2013-05-15T03:10:49.977 に答える
0

この手法で修正する必要があるバグに遭遇する場合があります。ただし、要素の追加に固有のものではありません。これは使用例の 1 つにすぎません。

複数のcss3プロパティを同時に設定してもブラウザが正しく再描画されない特定の種類のアニメーションを実行するときに、時々これに遭遇しました。

前のケースのコード例はありませんが、私のサイトhttp://popped.atでこの手法を使用している場所を確認できます。このファイルhttp://www.popped.at/js/main.jsを調べて、「//IE9 には 0 ミリ秒のタイムアウトが必要です」を検索します。この場合、キャンバスが適切に更新されないという問題が IE9 にありました。

(現在、このサイトはバックエンドで機能していないため、暗い状態になっています。私はそれに取り組んでいます。)

于 2013-05-15T03:05:52.707 に答える