SettimeOut(FN、0)はどのように機能しますか?
Settimeout(FN、0)は、JavaScriptですぐに機能を実行するのではなく、現在のコールスタックが空になるまで延期します。 1.これは、JavaScriptが単一スレッドであり、イベントループを介して非同期操作を処理するためです。 2。遅延が0ミリ秒であっても、SettimeOutは引き続きタスクキューにコールバックを配置し、実行を待ちます。 3.イベントループは、現在の同期コード(大きなループや複雑な計算など)が完了した後、コールバックをチェックして実行します。 4.実行順序のブロックや制御を避けるために、実行を遅らせるためによく使用されます。特に、ブラウザがDOMが更新されたときにレンダリングする機会があることを確認します。 5. Promise.resolve()。then()、queuememicrotask()、requestidlecallback()などを通じて、同様の動作は実装できますが、Setimeout(fn、0)は、その良好な互換性と理解のために広く使用されています。 6.長期タスクの分解、レイアウト測定を実行する前にDOMが安定するのを待つ、または複数の非同期コールバックの実行順序の制御に適しています。
JavaScriptでsetTimeout(fn, 0)
を呼び出すと、遅延がゼロに設定されていても、すぐに機能を実行しません。代わりに、現在のコールスタックがクリアされた後に実行される機能をスケジュールします。この動作は、JavaScriptがイベントループを介して非同期操作を処理する方法に関係しています。
SettimeOut(FN、0)が瞬時にない理由
JavaScriptは、コールスタックを使用して単一のスレッドでコードを実行します。 setTimeout
を使用すると、000万秒の遅延があっても、ブラウザはタスクキューにコールバックする場所を配置します。イベントループは、メインスレッドが現在のタスクを終了した後にのみこのキューをチェックします。
したがって、同期コードが実行されている場合(大きなループやヘビーコンピューティングなど)、 setTimeout(fn, 0)
発射される前にすべてが行われるまで待ちます。特定の時間を待つことではなく、イベントループでの順番を待つことです。
このトリックは、現在のロジックを「後」になるまで関数の実行を延期するためによく使用されます。これにより、ブロックを避けたり、特定の順序でコードの特定の部分が実行されるようにします。
UIの更新にどのように役立つか
setTimeout(fn, 0)
の一般的なユースケースの1つは、DOMの更新を扱うときです。ページに複数の変更を加えて、ブラウザにそれらの変更を一度に段階的にレンダリングしたい場合(一度に)、 setTimeout(fn, 0)
でいくつかのアクションを延期すると、ブラウザに塗り直す機会が与えられます。
例えば:
- Divのテキストを更新します
- 次に、レイアウトの変更をトリガーします
- その後、そのセクションまでスムーズにスクロールします
スクロールパーツをsetTimeout(fn, 0)
内に配置すると、スクロールしようとする前にレイアウトの変更がレンダリングされ、より予測可能な動作につながります。
これは、特定のDOM要素が実行される前に完全にレンダリングされることを期待するサードパーティのスクリプトまたはウィジェットを統合する場合にも役立ちます。
代替案と同様の行動
同様の非ブロッキング動作を達成するには、他にもいくつかの方法があります。
-
Promise.resolve().then(fn)
- これは、Microtaskキューを使用します。これは、setTimeout
の次の完全なタスクの前に実行されます。したがって、ほとんどの場合、さらに速いです。 -
queueMicrotask(fn)
-.then()
の使用と同様に、マイクロタスクをキューします。 -
requestIdleCallback(fn)
- ブラウザがアイドル状態の場合にのみ実行するバックグラウンドタスク用。
これらのそれぞれには、優先順位とユースケースが異なります。たとえば、現在のレンダリングサイクルの後に、次のペイントの前に何かが必要な場合は、 requestAnimationFrame(fn)
方が良いかもしれません。
それでも、 setTimeout(fn, 0)
広くサポートされ、理解しやすく、環境全体で一貫して機能するため、人気があり続けています。
いつ、なぜそれを使用するのか
setTimeout(fn, 0)
を使用して:
- UIの凍結を避けるために、長期にわたるタスクを分割したい
- レイアウトの測定のようなことをする前に、DOMが安定するのを待っています
- 異なる非同期コールバック間の実行順序を制御する必要があります
これは、最新の非同期パターンを念頭に置いて構築されていないユーザーインターフェイスロジックまたはレガシーコードを使用して作業しているシナリオで特に役立ちます。
留意
基本的にそれだけです。
以上がSettimeOut(FN、0)はどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undress AI Tool
脱衣画像を無料で

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない内蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get()を使用してデータを取得したり、.write()を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡潔な構文と強力な機能を備えており、非同期/待ち声、自動JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡素化することをお勧めします。 3.Node-Fetchは、約束と単純な構文に基づいて、ブラウザフェッチに似たスタイルを提供します

JavaScriptデータ型は、プリミティブタイプと参照タイプに分割されます。プリミティブタイプには、文字列、数字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り当てるときにコピーされるため、互いに影響を与えません。オブジェクト、配列、関数などの参照タイプはメモリアドレスを保存し、同じオブジェクトを指す変数は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。

JavaScriptアレイには、Map and Filterに加えて、他の強力で使用されていない方法があります。 1.還元は、合計するだけでなく、カウント、グループ、フラットンアレイ、新しい構造を構築することもできます。 2。FindおよびFindIndexは、個々の要素またはインデックスを見つけるために使用されます。 3.一部とすべてが条件が存在するか、すべての出会いかを判断するために使用されます。 4.ソートはソートできますが、元の配列を変更します。 5.副作用を避けるために、それを使用するときにアレイをコピーすることに注意してください。これらの方法により、コードがより簡潔で効率的になります。

JavaScriptのフィルター()メソッドは、すべての合格テスト要素を含む新しい配列を作成するために使用されます。 1.Filter()は元の配列を変更しませんが、条件付き要素を満たす新しい配列を返します。 2。基本的な構文はarray.filter((element)=> {returnCondition;})です。 3.オブジェクト配列は、30歳以上のユーザーをフィルタリングするなど、属性値でフィルタリングできます。 4.年齢と名前の長さの条件を同時に満たすなど、マルチコンディショナルフィルタリングをサポートします。 5。動的条件を処理し、フィルターパラメーターを関数にパスして、柔軟なフィルタリングを実現できます。 6.それを使用する場合は、空のアレイの返品を避けるためにブール値を返すように注意し、他の方法を組み合わせて文字列マッチングなどの複雑なロジックを実現してください。

JavaScriptでは、配列に特定の値が含まれているかどうかを確認します。最も一般的な方法は、boolean値を返す()を含む()であり、構文はarray.includes(valuetofind)です。古い環境と互換性がある必要がある場合は、numbers.indexof(20)!== -1などのindexof()を使用します。オブジェクトまたは複雑なデータの場合、ユーザー(user => user.id === 1)などの綿密な比較には、いくつかの()メソッドを使用する必要があります。

Virtual Domは、実際のDOM更新を最適化するプログラミングコンセプトです。メモリ内の実際のDOMに対応するツリー構造を作成することにより、実際のDOMの頻繁かつ直接的な動作を避けます。その中心的な原則は次のとおりです。1。データが変更されたときに新しい仮想DOMを生成します。 2。新しい仮想ドームと古い仮想ドームの最小の違いを見つけます。 3.再配置と再描画のオーバーヘッドを減らすための実際のDOMのバッチアップデート。さらに、ユニークな安定したキーを使用すると、リストの比較効率を改善できますが、最新のフレームワークでは他のテクノロジーを採用して仮想DOMを置き換えます。

非同期関数のエラーを処理するには、トライ/キャッチを使用し、コールチェーンでそれらを処理し、.catch()メソッドを使用して、unhandledRejectionイベントをリッスンします。 1.トライ/キャッチに使用するためにエラーをキャッチすることは、明確な構造を備えた推奨方法であり、待ち望みの例外を処理できます。 2。コールチェーンの取り扱いエラーは、マルチステッププロセスに適した集中ロジックにすることができます。 3. .catch()を使用して、Async関数を呼び出した後にエラーをキャッチします。これは、Promiseの組み合わせシナリオに適しています。 4.未処理のイベントに耳を傾けて、未処理の拒否を最後の防衛線として記録します。上記の方法は、非同期エラーが正しくキャプチャおよび処理されることを共同で保証します。

JavaScriptタイムゾーンの問題に対処するための鍵は、適切な方法を選択することです。 1.ネイティブの日付オブジェクトを使用する場合は、UTC時間に保存および転送し、表示時にユーザーのローカルタイムゾーンに変換することをお勧めします。 2。複雑なタイムゾーン操作の場合、IANAタイムゾーンデータベースをサポートし、便利なフォーマットおよび変換機能を提供するモーメントタイムゾーンを使用できます。 3.表示時間をローカライズする必要があり、サードパーティライブラリを導入したくない場合は、intl.dateTimeformatを使用できます。 4.最新の軽量ソリューションDay.JSおよびTimeZoneおよびUTCプラグインに推奨されます。
