Window setTimeout() 方法

实例

3 秒钟后显示警告消息框 (3000 毫秒):

<!DOCTYPE html>
<html>
<body>
<p>单击按钮等待 3 秒钟，然后弹出 "你好"。</p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
  setTimeout(function(){ alert("Hello"); }, 3000);
}
</script>
</body>
</html>

运行一下

定义与用法

setTimeout() 方法在指定的毫秒数后调用函数或计算表达式。

提示：1000 毫秒 = 1 秒。

提示：该函数只执行一次。如果需要重复执行，请使用 setInterval() 方法。

提示：使用 clearTimeout() 方法阻止函数运行。

浏览器支持

表中的数字指定完全支持该方法的第一个浏览器版本。

方法
setTimeout()	1.0	4.0	1.0	1.0	4.0

语法

setTimeout(function, milliseconds, param1, param2, ...)

参数值

参数	描述
function	必填。将要执行的函数
milliseconds	可选。执行代码前等待的毫秒数。如果省略，则使用值 0
param1, param2, …	可选。 function 函数的附加参数 (IE9 及更早版本不支持)

技术细节

返回值:	一个数字，表示设置的计时器的 ID 值。将此值与 clearTimeout() 方法一起使用可取消计时器

更多实例

实例

您还可以引用 "named" 函数；每 3 秒（3000 毫秒）弹出 "Hello":

<!DOCTYPE html>
<html>
<body>
<p>单击按钮等待 3 秒钟，然后弹出 "Hello"。</p>
<button onclick="myFunction()">试一试</button>
<script>
var myVar;
function myFunction() {
  myVar = setTimeout(alertFunc, 3000);
}
function alertFunc() {
  alert("Hello!");
}
</script>
</body>
</html>

运行一下

实例

显示定时文本:

<!DOCTYPE html>
<html>
<body>
<p>点击下面的按钮。输入字段将告诉您何时经过 2 秒、4 秒和 6 秒。</p>
<button onclick="timedText()">显示定时文本</button>
<input type="text" id="txt">
<script>
function timedText() {
  var x = document.getElementById("txt");
  setTimeout(function(){ x.value="2 seconds" }, 2000);
  setTimeout(function(){ x.value="4 seconds" }, 4000);
  setTimeout(function(){ x.value="6 seconds" }, 6000);
}
</script>
</body>
</html>

运行一下

实例

打开一个新窗口，并在 3 秒（3000 毫秒）后关闭该窗口:

<!DOCTYPE html>
<html>
<body>
<p>单击按钮打开一个新窗口，并在 3 秒（3000 毫秒）后关闭该窗口</p>
<button onclick="openWin()">打开 "myWindow"</button>
<script>
function openWin() {
  var myWindow = window.open("", "myWindow", "width=200, height=100");
  myWindow.document.write("<p>这是 'myWindow'</p>");
  setTimeout(function(){ myWindow.close() }, 3000);
}
</script>
</body>
</html>

运行一下

实例

使用 clearTimeout() 防止函数执行:

<!DOCTYPE html>
<html>
<body>
<p>等待3秒钟后，单击第一个按钮弹出 "Hello"。</p>
<p>单击第二个按钮以阻止执行第一个函数。（您必须在 3 秒钟结束前单击它。）</p>
<button onclick="myFunction()">试一试</button>
<button onclick="myStopFunction()">停止弹出</button>
<script>
var myVar;
function myFunction() {
  myVar = setTimeout(function(){ alert("Hello") }, 3000);
}
function myStopFunction() {
  clearTimeout(myVar);
}
</script>
</body>
</html>

运行一下

实例

永远计数 - 但也可以停止计数:

<!DOCTYPE html>
<html>
<body>
<button onclick="startCount()">开始计数!</button>
<input type="text" id="txt">
<button onclick="stopCount()">停止计数!</button>
<p>
点击 "开始计数!" 按上面的按钮启动计时器。输入字段将永远计数，从 0 开始。点击 "停止计数!" 的按钮停止计数。点击  "开始计数!" 按钮再次启动计数。
</p>
<script>
var c = 0;
var t;
var timer_is_on = 0;
function timedCount() {
  document.getElementById("txt").value = c;
  c = c + 1;
  t = setTimeout(timedCount, 1000);
}
function startCount() {
  if (!timer_is_on) {
    timer_is_on = 1;
    timedCount();
  }
}
function stopCount() {
  clearTimeout(t);
  timer_is_on = 0;
}
</script>
</body>
</html>

运行一下

实例

用计时事件创建时钟:

<!DOCTYPE html>
<html>
<body onload="startTime()">
<div id="txt"></div>
<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  // add a zero in front of numbers<10
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;
  var t = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}
</script>
</body>
</html>

运行一下

实例

将参数传递给 alertFunc 函数（在 IE9 及更早版本中不起作用）:

<!DOCTYPE html>
<html>
<body>
<p>2 秒后点击开始按钮输出 "Hello"。</p>
<p>在本例中，我们还输出了传递给 alertFunc() 函数的参数（在 IE9 和更早版本中不起作用）。</p>
<button onclick="myStartFunction()">开始</button>
<p id="demo">
<p id="demo2" style="color:red;">
<script>
var myVar;
function myStartFunction() {
  myVar = setTimeout(alertFunc, 2000, "First parameter", "Second parameter");
}
function alertFunc(param1, param2) {
  document.getElementById("demo").innerHTML += "Hello ";
  document.getElementById("demo2").innerHTML = "参数传递到 to alertFunc(): <br>" 
  + param1 + "<br>" + param2 + "<br>";
}
</script>
</body>
</html>

运行一下

但是，如果使用匿名函数，它将在所有浏览器中都有效:

<!DOCTYPE html>
<html>
<body>
<p>2 秒后点击开始按钮输出 "Hello"。</p>
<p>在本例中，我们还输出传递给 alertFunc() 函数的参数。</p>
<button onclick="myStartFunction()">开始</button>
<p id="demo">
<p id="demo2" style="color:red;">
<script>
var myVar;
function myStartFunction() {
  myVar = setTimeout(function(){ alertFunc("First parameter", "Second parameter"); }, 2000);
}
function alertFunc(param1, param2) {
  document.getElementById("demo").innerHTML += "Hello ";
  document.getElementById("demo2").innerHTML = "参数传递到 alertFunc(): <br>" 
  + param1 + "<br>" + param2 + "<br>";
}
</script>
</body>
</html>

运行一下

Window setTimeout() 方法

实例

定义与用法

浏览器支持

语法

参数值

技术细节

更多实例

实例

实例

实例

实例

实例

实例

实例

相关页面

分类导航