Javascript スレッドとタイミング メカニズムに関する簡単な説明_JavaScript スキル
setTimeout と setInterval の使用法
Javascript API ドキュメントで定義されている setTimeout と setInterval の 2 番目のパラメーターは、それぞれコールバック関数が実行されるまでのミリ秒数とコールバック関数が実行されるまでのミリ秒数を意味します。しかし、実務経験を積むにつれ、そうではないことが分かりました。
たとえば
div.onclick=function(){
setTimeout(function(){
document.getElementById('input').focus();
},0);
}
説明できませんが、なぜタイマーを設定してぐるぐる回す必要があるのでしょうか。
別の日、あなたは次のコードを書きました
setTimeout(function(){while(true){}},100);
setTimeout(function(){alert('你好');},200);
コードの最初の行が無限にループし、2 行目のアラートが表示されないのはなぜですか?
シングルスレッドかマルチスレッドか?
JavaScript エンジンはシングル スレッドで実行され、ブラウザでは JavaScript プログラムを実行するスレッドが 1 つだけであることがわかりました。シングルスレッド設計のため、複雑なマルチスレッド同期の問題は解消されます。
タイマーを設定すると、ブラウザーは指定したコールバック関数をすぐに実行するのではなく、設定時間の経過後にタスク シーケンスに挿入します。タイミング時間が 0 に設定されている場合は、タスク シーケンスがすぐに実行されるのではなく、すぐに挿入されることを意味します。キュー内のタスクが実行されるまで待機する必要があり、タスクを実行する順番が来ます。
したがって、次のコードは最初に 2 が表示され、次に 1 が表示されます
setTimeout(function(){
alert(1);
},0);
alert(2);
では、これは実際にどのような用途に使えるのでしょうか?以下の例を見てみましょう
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>setTimeout 0</title>
</head>
<body>
输入字符，但内容却不能实时显示<input type="text" onkeydown="show(this.value)"/> <br/>
输入字符，内容能实时显示<input type="text" onkeydown="var self=this;setTimeout(function(){show(self.value)},0)"/>
<div></div>
<script>
function show(val){
document.getElementsByTagName("div")[0].innerHTML=val;
}
</script>
</body>
</html>
この例では、JS エンジンは keydown イベント ハンドラーを実行してから、入力ボックスの値を更新する必要があります。イベント ハンドラーが実行されると、値を更新するタスクはキューに入って待機することしかできないため、keydown イベントの実行時に更新された値を取得することはできませんが、setTimeout を通じて値を取得する操作をキューに入れます。値を更新してから実行するとリアルタイムに内容が表示されます。
戻って次のコードを見てください:
setTimeout(function(){
//do something...
setTimeout(arguments.callee,10);
},10);
setInterval(function(){
//do something...
},10);
これら 2 つのコードは同じ効果があるように見えますね。実際には、最初の段落のコールバック関数の setTimeout は、JS エンジンの実行後に設定される新しいタイミングであり、前のコールバックの完了から開始までの時間間隔があることを前提としています。理論的には、時間間隔 > ;=10ms、次のコード
そういえば、XMLHttpRequest って本当に非同期なのでしょうか？はい、リクエストは非同期ですが、このリクエストはブラウザによって開かれた新しいスレッドです。リクエストされた状態が変更されると、コールバックが事前に設定されている場合、非同期スレッドは状態変更イベントを JS エンジンの処理キューに入れて処理を待機します。タスクが処理されると、JS エンジンは常に で設定された関数を実行します。単一スレッドの onreadystatechange。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7467
15
1376
52
77
11
19
20
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
Dec 17, 2023 am 09:39 AM
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
C++ 同時プログラミング: スレッドの枯渇と優先順位の逆転を回避するには?
May 06, 2024 pm 05:27 PM
スレッドの枯渇を回避するには、公平なロックを使用してリソースの公平な割り当てを確保するか、スレッドの優先順位を設定します。優先順位の逆転を解決するには、リソースを保持しているスレッドの優先順位を一時的に高める優先順位の継承を使用するか、リソースを必要とするスレッドの優先順位を高めるロック プロモーションを使用します。
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
C++ 同時プログラミング: スレッドの終了とキャンセルを行うには?
May 06, 2024 pm 02:12 PM
C++ のスレッド終了およびキャンセル メカニズムには次のものがあります。 スレッド終了: std::thread::join() は、ターゲット スレッドが実行を完了するまで現在のスレッドをブロックします。 std::thread::detach() は、ターゲット スレッドをスレッド管理から切り離します。スレッドのキャンセル: std::thread::request_termination() はターゲット スレッドに実行の終了を要求します。 std::thread::get_id() はターゲット スレッド ID を取得し、std::terminate() とともに使用してターゲットを即座に終了できます。糸。実際の戦闘では、request_termination() によってスレッドが終了のタイミングを決定でき、join() によってメインラインでそれが保証されます。
