阅读 204

JavaScript 定时器(Timing)

计时函数是使我们能够在特定时间执行功能的函数。

使用计时函数,您可以延迟代码的执行,以免在触发事件的确切时刻完成代码。

JavaScript中有两个计时函数:

  • setTimeout(function, milliseconds) -等待指定的毫秒数后执行函数(function)

  • setInterval(function, milliseconds) -与setTimeout()相同,但是连续重复执行该函数(function)

这两个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秒执行一次startTimer()setInterval(startTimer, 1000);function startTimer() {
  var date = new Date();
  document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

测试看看‹/›

停止执行代码

clearInterval()方法停止执行setInterval()中指定的函数。

语法:

window.clearInterval(var)

clearInterval()方法使用从setInterval()返回的变量。

  t = setInterval();

  clearInterval(t);

与上述示例相同,但添加了“停止”按钮:

示例

//每1秒执行一次startTimer()var t = setInterval(startTimer, 1000);function startTimer() {
  var date = new Date();
  document.getElementById("result").innerHTML = date.toLocaleTimeString();
}//取消使用setInterval()创建的重复动作function stopTimer() {
   clearInterval(t);
}

测试看看‹/›

更多示例

单击下面的“开始计数”按钮以启动计时器。单击“停止计数”按钮停止计数:

0

开始计数停止计数

运行代码

单击下面的“启动进度”按钮以启动进度栏。单击“停止进度”按钮以停止进度栏:

开始进度停止进度

运行代码


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐