肉渣教程

JS Timing

上一节 下一节

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>

运行一下


JS Timing

上一节 下一节