JavaScript 计时事件

JavaScript可以指定某些代码在指定时长后被执行，这就是所谓的JavaScript计时事件。

• setTimeout(function, milliseconds) - 在指定毫秒后，运行一次函数（运行一下）
• clearTimeout(timeoutVariable) - 停止setTimeout计时事件（运行一下）
• setInterval(function, milliseconds) - 每隔指定毫秒，重复运行函数（运行一下）
• clearInterval(timerVariable) - 停止setInterval计时事件（运行一下）

---

上述各方法都是window对象的方法，但window前缀可以省略，故本节中会自动省去window前缀。

---

setTimeout() 方法

setTimeout(function, milliseconds)

setTimeout()方法的作用是在指定毫秒后，运行一次函数。milliseconds参数就是指定毫秒数，function参数就是计时结束后被执行的函数。

<button onclick="setTimeout(myFunction, 3000)">click me</button>

<script>
function myFunction() {
  alert('反清复明');
}
</script>

运行一下

clearTimeout()方法

clearTimeout(timeoutVariable)

clearTimeout()方法的作用是停止setTimeout计时事件；timeoutVariable参数是指setTimeout方法返回的对象。具体操作如下：

myVar = setTimeout(function, milliseconds);
clearTimeout( myVar );

案例：

<button onclick="myVar=setTimeout(myFunction, 3000)">click me</button>
<button onclick="clearTimeout(myVar)">stop it</button>

运行一下

setInterval()方法

setInterval(function, milliseconds);

setInterval方法的作用是在每隔指定毫秒，重复运行函数。milliseconds参数就是指定的间隔毫秒数，function参数是指每隔一段时间重复运行的函数对象。

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = 
  d.toLocaleTimeString();
}

运行一下

clearInterval() 方法

clearInterval(timerVariable)

clearInterval方法的作用是停止setInterval计时事件。timerVariable参数是指setInterval方法返回的对象。具体的操作如下：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

案例：

<button onclick="clearInterval(myVar)">stop it</button>

<p id="demo"></p>

<script>
var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = 
  d.toLocaleTimeString();
}
</script>

运行一下