JavaScriptタイマの原理と高度な使用
5066 ワード
JAvaScriptには2つのタイマーが内蔵されており、1つはsettimeout()1つはsetInterval()です.タイマーの動作原理をわかりやすく説明します.
使用方法:
setTimeout()
最初のパラメータは、複数のコールバック関数の間に「;」と入力できます.隔てておけばいいですが、また、関数に()を付けたり、out()を書いたりすることはできません.さもないと思いがけない間違いになる.
setInterval()
この方法は,1つの関数を一定時間おきに呼び出すのによく用いられる方法である.タイミング実行をキャンセルする場合は、cleartimeoutメソッドと同様です.
1番目のメソッドと2番目のメソッドの最大の違いは、1つは1回のみ実行され、1つはループ実行されます.
アドバンスドタイマ
多くの人はJSのタイマーに対して普遍的な誤解があって、それはスレッドだと思って、実はJavaScriptは単一のスレッドの環境の中で運用して、タイマーはただコードを計画して更に未来のある時間だけ実行します.ページのライフサイクルでは、JavaScriptスレッドを制御する他のコードが異なる場合があるため、実行タイミングは保証されません.ページのダウンロードが完了した後のコードの実行、イベントハンドラ、Ajaxコールバック関数は同じスレッドで実行する必要があります.実際には、ブラウザはソートを担当し、ある時点でのコードの優先度を割り当てます.
JSはタイムライン上で実行されるように想像できます.ページがロードされると、要素に含まれるコードを実行します.その後、JSプロセスはより多くのコードの実行を待っています.プロセスが空いている場合、次のコードがトリガーされ、すぐに実行されます.たとえば、ボタンをクリックすると、JavaScriptプロセスがアイドル状態である限りonclickイベントハンドラがすぐに実行されます.</span>
</div>
<div>
<span style="font-size:18px;"><a href="https://img.私たちcom/image/info8/6af64249623c4d47842ed644ffaa3f64.jpg"target="_blank"><img src="https://img.私たちcom/image/info8/6af64249623c4d47842ed644ffaa3f64.jpg"alt="JavaScriptタイマの原理と高度な使用_1枚目の画像「width=」650「height=」133「style=」border:1 px solid black;"></a><br></span>
</div>
<div>
<span style="font-size:18px;">メインJS実行プログラムに加えて、プロセスの空き時間に実行されるコードキューがあります.ページのライフサイクルが進むにつれて、コードは実行順にキューに追加されます.</span>
</div>
<div>
<span style="font-size:18px;"><span style="font-family:verdana, 'ms song', Arial, Helvetica, sans-serif;line-height:21px;">タイマのキューに対する動作は、特定の時間が過ぎた後、コードを挿入し、キューに追加することはすぐに実行されるという意味ではなく、できるだけ早く実行されるとしか言いようがありません.250 ms後に実行されるタイマを設定すると、250 ms後にすぐに実行されるわけではありません.150 ms後にキューに追加されることを示します.この時点でキューが空いている場合、では、このコードは実行されます.</span></span>
</div>
<div>
<span style="font-size:18px;"><span style="font-family:verdana, 'ms song', Arial, Helvetica, sans-serif;line-height:21px;"></span></span>
<pre><code class="language-html">var timeoutID = window.setTimeout(out,10000);
var btn = document.getElementById("mybtn");
btn.onclick = function () {
setTimeout(function () {
document.getElementById("message").nodeName = "mymessage";
//その他コード
}, 250);
}</code></pre>
<br>
<br>
</div>
<div>
<span style="font-size:18px;"><span style="font-family:verdana, 'ms song', Arial, Helvetica, sans-serif;line-height:21px;">タイマの場合、指定した間隔は、タイマのコードがいつ実行されるかではなく、いつキューに追加されるかを示します.このonclick事伯処理のプロセスタイムラインについては下図:</span><br><br></span>
</div>
<div>
<span><span><span><span style="font-size:18px;"><a href="https://img.私たちcom/image/info8/0b29ff503773419f88df8d0ad9f4d865.png"target="_blank"><img src="https://img.私たちcom/image/info8/0b29ff503773419f88df8d0ad9f4d865.png"alt="JavaScriptタイマの原理と高度な使用_2枚目の画像「width=」822「height=」233「style=」border:1 px solid black;"></a><br></span></span></span></span>
</div>
<div>
<span><span><span><span style="font-size:18px;"><span style="font-family:verdana, 'ms song', Arial, Helvetica, sans-serif;line-height:21px;">以下に簡単なタイミングを示し、停止機能:</span></span></span></span></span>
</div>
<div>
<pre><code class="language-html"></code></pre>
<pre class="html"><code class="language-html"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator"content="EditPlus®">
<meta name="Author"content="">
<meta name="Keywords"content="">
<meta name="Description"content="">
<title>Document</title>
</head>
<body>
<input type=「button」value=「計時開始!」onClick="timedCount()">
<input type="text"id="txt">
<input type=「button」value=「計時停止!」onClick="stopCount()">
</body>
<script type="text/javascript">
var c = 0
var t
function timedCount() {
document.getElementById('txt').value = c
c = c + 1
t = setTimeout("timedCount()", 1000)
}
function stopCount() {
clearTimeout(t)
}
使用方法:
setTimeout()
setTimeoutの構文は非常に簡単で、最初のパラメータはコールバック関数であり、2番目のパラメータは遅延時間である.関数は、clearTimeoutのパラメータとして使用してタイマをキャンセルすることができる数値タイプのID一意識別子を返します.function out(){
alert(" ");
};
var timeoutID = window.setTimeout(out,10000);最初のパラメータは、複数のコールバック関数の間に「;」と入力できます.隔てておけばいいですが、また、関数に()を付けたり、out()を書いたりすることはできません.さもないと思いがけない間違いになる.
setInterval()
この方法は,1つの関数を一定時間おきに呼び出すのによく用いられる方法である.タイミング実行をキャンセルする場合は、cleartimeoutメソッドと同様です.
1番目のメソッドと2番目のメソッドの最大の違いは、1つは1回のみ実行され、1つはループ実行されます.
アドバンスドタイマ
多くの人はJSのタイマーに対して普遍的な誤解があって、それはスレッドだと思って、実はJavaScriptは単一のスレッドの環境の中で運用して、タイマーはただコードを計画して更に未来のある時間だけ実行します.ページのライフサイクルでは、JavaScriptスレッドを制御する他のコードが異なる場合があるため、実行タイミングは保証されません.ページのダウンロードが完了した後のコードの実行、イベントハンドラ、Ajaxコールバック関数は同じスレッドで実行する必要があります.実際には、ブラウザはソートを担当し、ある時点でのコードの優先度を割り当てます.
JSはタイムライン上で実行されるように想像できます.ページがロードされると、要素に含まれるコードを実行します.その後、JSプロセスはより多くのコードの実行を待っています.プロセスが空いている場合、次のコードがトリガーされ、すぐに実行されます.たとえば、ボタンをクリックすると、JavaScriptプロセスがアイドル状態である限りonclickイベントハンドラがすぐに実行されます.</span>
</div>
<div>
<span style="font-size:18px;"><a href="https://img.私たちcom/image/info8/6af64249623c4d47842ed644ffaa3f64.jpg"target="_blank"><img src="https://img.私たちcom/image/info8/6af64249623c4d47842ed644ffaa3f64.jpg"alt="JavaScriptタイマの原理と高度な使用_1枚目の画像「width=」650「height=」133「style=」border:1 px solid black;"></a><br></span>
</div>
<div>
<span style="font-size:18px;">メインJS実行プログラムに加えて、プロセスの空き時間に実行されるコードキューがあります.ページのライフサイクルが進むにつれて、コードは実行順にキューに追加されます.</span>
</div>
<div>
<span style="font-size:18px;"><span style="font-family:verdana, 'ms song', Arial, Helvetica, sans-serif;line-height:21px;">タイマのキューに対する動作は、特定の時間が過ぎた後、コードを挿入し、キューに追加することはすぐに実行されるという意味ではなく、できるだけ早く実行されるとしか言いようがありません.250 ms後に実行されるタイマを設定すると、250 ms後にすぐに実行されるわけではありません.150 ms後にキューに追加されることを示します.この時点でキューが空いている場合、では、このコードは実行されます.</span></span>
</div>
<div>
<span style="font-size:18px;"><span style="font-family:verdana, 'ms song', Arial, Helvetica, sans-serif;line-height:21px;"></span></span>
<pre><code class="language-html">var timeoutID = window.setTimeout(out,10000);
var btn = document.getElementById("mybtn");
btn.onclick = function () {
setTimeout(function () {
document.getElementById("message").nodeName = "mymessage";
//その他コード
}, 250);
}</code></pre>
<br>
<br>
</div>
<div>
<span style="font-size:18px;"><span style="font-family:verdana, 'ms song', Arial, Helvetica, sans-serif;line-height:21px;">タイマの場合、指定した間隔は、タイマのコードがいつ実行されるかではなく、いつキューに追加されるかを示します.このonclick事伯処理のプロセスタイムラインについては下図:</span><br><br></span>
</div>
<div>
<span><span><span><span style="font-size:18px;"><a href="https://img.私たちcom/image/info8/0b29ff503773419f88df8d0ad9f4d865.png"target="_blank"><img src="https://img.私たちcom/image/info8/0b29ff503773419f88df8d0ad9f4d865.png"alt="JavaScriptタイマの原理と高度な使用_2枚目の画像「width=」822「height=」233「style=」border:1 px solid black;"></a><br></span></span></span></span>
</div>
<div>
<span><span><span><span style="font-size:18px;"><span style="font-family:verdana, 'ms song', Arial, Helvetica, sans-serif;line-height:21px;">以下に簡単なタイミングを示し、停止機能:</span></span></span></span></span>
</div>
<div>
<pre><code class="language-html"></code></pre>
<pre class="html"><code class="language-html"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator"content="EditPlus®">
<meta name="Author"content="">
<meta name="Keywords"content="">
<meta name="Description"content="">
<title>Document</title>
</head>
<body>
<input type=「button」value=「計時開始!」onClick="timedCount()">
<input type="text"id="txt">
<input type=「button」value=「計時停止!」onClick="stopCount()">
</body>
<script type="text/javascript">
var c = 0
var t
function timedCount() {
document.getElementById('txt').value = c
c = c + 1
t = setTimeout("timedCount()", 1000)
}
function stopCount() {
clearTimeout(t)
}