English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript 基礎チュートリアル

JavaScript オブジェクト

JavaScript 関数

JS HTML DOM

JS ブラウザBOM

AJAX 基礎チュートリアル

JavaScript 参考マニュアル

JavaScript タイマー(Timing)

午後11:01:41

計時関数は、特定の時間に機能を実行できるようにする関数です。

計時関数を使用すると、コードの実行を遅延させ、イベントが発生する正確な瞬間にコードが完了しないようにできます。

JavaScript中有两个计时函数:

这两个setTimeout()setInterval()是方法窗口对象,可以在不窗口前缀被写入。

setTimeout()方法

setTimeout()方法用于在一段时间后仅执行一次函数或指定的代码段。

文法:

window.setTimeout(function, milliseconds)

第一个参数是要执行的函数。

第二个参数指示执行前的毫秒数(1秒= 1000ミリ秒)。

以下示例在单击按钮2秒钟后将显示警报消息:

<button onclick="setTimeout(myFunc, 2000)">Click</button>
<script>
function myFunc() {
  alert("Hello World");
}
</script>
テストをしてみる‹/›

コードの実行を停止します

clearTimeout()方法停止执行setTimeout()中指定的函数。

文法:

window.clearTimeout(var)

clearTimeout()方法使用从setTimeout()返回的变量。

  t = setTimeout();
  clearTimeout(t);

如果尚未执行该函数,则可以通过调用clearTimeout()方法来停止执行。

上記の例と同じですが、「停止」ボタンを追加しています:

<button onclick="myFunc()">Click</button>
<button onclick="myStopFunc()">Stop the alert</button>
<script>
var t;
function myFunc() {
  t = setTimeout(function(){ alert("Hello world"); }, 2000);
}
function myStopFunc() {
  clearTimeout(t);
}
</script>
テストをしてみる‹/›

setInterval()方法

setInterval()方法重复调用一个函数,每次调用之间有固定的时间延迟。

文法:

window.setInterval(function, milliseconds)

第一个参数是要执行的函数。

第二个参数指示每次执行之间的时间间隔的长度。

このサンプルでは、毎秒「startTimer」と呼ばれる機能が実行されます(デジタルウォッチのような):

//毎1
setInterval(startTimer, 1000);
function startTimer() {
  var date = new Date();
  document.getElementById("result").innerHTML = date.toLocaleTimeString();
}
テストをしてみる‹/›

コードの実行を停止します

clearInterval()指定された関数の実行を停止する方法

文法:

window.clearInterval(var)

clearInterval()setInterval()から返される変数を使用する方法

  t = setInterval();
  clearInterval(t);

上記の例と同じですが、「停止」ボタンを追加しています:

//毎1
var t = setInterval(startTimer, 1000);
function startTimer() {
  var date = new Date();
  document.getElementById("result").innerHTML = date.toLocaleTimeString();
}
//setInterval()で作成された繰り返し動作をキャンセルします
function stopTimer() {
   clearInterval(t);
}
テストをしてみる‹/›

もっとの例

以下の「カウントを開始」ボタンをクリックしてタイマーを開始します。以下の「カウントを停止」ボタンをクリックしてカウントを停止します:

0
コードを実行

以下の「進行を開始」ボタンをクリックして進行バーを開始します。以下の「進行を停止」ボタンをクリックして進行バーを停止します:

コードを実行