上一节:
下一节:

  JavaScript BOM 计时事件

  • JavaScript 计时事件

    JavaScript可以按时间间隔执行。这称为计时事件。window对象允许以指定的时间间隔执行代码。这些时间间隔称为定时事件。与JavaScript一起使用的两个关键方法是：
    • setTimeout(function, milliseconds）
      • 在等待指定的毫秒数后执行一个函数。
    • setInterval(function, milliseconds）
      • 与setTimeout（）相同，但是连续重复执行该函数。
    setTimeout()和setInterval()是HTML DOM Window对象的方法。

  • setTimeout()方法

    语法： 
    window.setTimeout(function, milliseconds);
    window.setTimeout()可以在没有window前缀的情况下编写该方法。
    第一个参数是要执行的函数。第二个参数表示执行前的毫秒数。
    单击按钮。等待3秒钟，页面将提示“Hello”： 
    <button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>
    尝试一下

  • 如何停止执行setTimeout？

    clearTimeout()方法停止执行setTimeout()中指定的函数。
    语法： 
    window.clearTimeout(timeoutVariable)
    window.clearTimeout()可以在没有window前缀的情况下编写该方法。
    clearTimeout()方法使用从setTimeout()以下返回的变量： 
    myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
    如果函数尚未执行，则可以通过调用clearTimeout()方法来停止执行：
    与上面的示例相同，但添加了“停止”按钮： 
    <button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>
    尝试一下

  • setInterval()方法

    setInterval()方法在每个给定的时间间隔重复给定的函数。
    语法： 
    window.setInterval(function, milliseconds);
    window.setInterval()可以在没有window前缀的情况下编写该方法。
    第一个参数是要执行的函数。
    第二个参数表示每次执行之间的时间间隔的长度。
    此示例每秒执行一次名为“myTimer”的函数（如数字手表）。 
    var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
    尝试一下
    一秒钟内有1000毫秒。

  • 如何停止执行setInterval？

    clearInterval()方法停止执行setInterval（）方法中指定的函数。
    语法： 
    window.clearInterval(timerVariable)
    window.clearInterval()可以在没有window前缀的情况下编写该方法。
    clearInterval()方法使用从setInterval()以下返回的变量： 
    myVar = setInterval(function, milliseconds);
clearInterval(myVar);
    与上面的示例相同，但我们添加了“停止时间”按钮： 
    <p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
    尝试一下
上一节:
下一节: