JavaScript 可以在时间间隔内执行，这就是所谓的定时事件（ Timing Events）。

㈠Timing 事件

⑴window 对象允许以指定的时间间隔执行代码，这些时间间隔称为定时事件。

⑵通过 JavaScript 使用的有两个关键的方法：

①setTimeout(function, milliseconds)  ：在等待指定的毫秒数后执行函数。

②setInterval(function, milliseconds)   ：等同于 setTimeout()，但持续重复执行该函数。

⑶setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

㈡setTimeout() 方法

⑴语法：window.setTimeout(function, milliseconds);

    window.setTimeout() 方法可以不带 window 前缀来编写。

⑵第一个参数是要执行的函数。

⑶第二个参数指示执行之前的毫秒数。

⑷示例：单击按钮。等待 3 秒，然后页面会提示 "Hello"：

<!DOCTYPE html>

<html>

<body>

<p>点击“试一试”。等待 3 秒钟，页面将提示“Hello”。</p>

<button onclick="setTimeout(myFunction, 3000);">试一试</button>

<script>

function myFunction() {

  alert('Hello');

}

</script>

</body>

</html>

效果图：

㈢setTimeout() 停止执行

⑴clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

⑵语法：window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不带 window 前缀来写。

⑶clearTimeout() 使用从 setTimeout() 返回的变量：

myVar = setTimeout(function, milliseconds);

clearTimeout(myVar);

⑷示例：

<!DOCTYPE html>

<html>

<body>

<p>点击“试一试”。等 3 秒。该页面将提醒“Hello”。</p>

<p>单击“停止”以阻止第一个函数执行。</p>

<p>（在 3 秒钟之前，必须单击“停止”。）</p>

<button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button>

<button onclick="clearTimeout(myVar)">停止</button>

<script>

function myFunction() {

  alert("Hello");

}

</script>

</body>

</html>

㈣setInterval() 方法

⑴setInterval() 方法在每个给定的时间间隔重复给定的函数。

⑵语法：window.setInterval(function, milliseconds);

   window.setInterval() 方法可以不带 window 前缀来写。

⑶第一个参数是要执行的函数。

⑷第二个参数每个执行之间的时间间隔的长度。

⑸示例：每秒执行一次函数 "myTimer"（就像数字手表）。（ 一秒有 1000 毫秒）

<!DOCTYPE html>

<html>

<body>

<p>此页面上的脚本启动这个时钟：</p>

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

<script>

var myVar = setInterval(myTimer, 1000);

function myTimer() {

  var d = new Date();

  document.getElementById("demo").innerHTML = d.toLocaleTimeString();

}

</script>

</body>

</html>

效果图：

 

㈤setInterval() 停止执行

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

⑵语法：window.clearInterval(timerVariable)

window.clearInterval() 方法可以不带 window 前缀来写。

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

myVar = setInterval(function, milliseconds);

clearInterval(myVar);

⑷示例：

<!DOCTYPE html>

<html>

<body>

<p>此页面上的脚本启动这个时钟：</p>

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

<button onclick="clearInterval(myVar)">停止时间</button>

<script>

var myVar = setInterval(myTimer ,1000);

function myTimer() {

  var d = new Date();

  document.getElementById("demo").innerHTML = d.toLocaleTimeString();

}

</script>

</body>

</html>

㈥示例：由计时时间创建的时钟

<!DOCTYPE html>

<html>

<head>

<script>

function startTime() {

  var today = new Date();

  var h = today.getHours();

  var m = today.getMinutes();

  var s = today.getSeconds();

  m = checkTime(m);

  s = checkTime(s);

  document.getElementById('txt').innerHTML =

  h + ":" + m + ":" + s;

  var t = setTimeout(startTime, 500);

}

function checkTime(i) {

  if (i < 10) {i = "0" + i};  // 在数字 < 10 之前加零

  return i;

}

</script>

</head>

<body onload="startTime()">

<div id="txt"></div>

</body>

</html>

参考：w3chool：https://www.w3school.com.cn/js/js_timing.asp

JavaScript 的定时（Timing ）事件——setTimeout()与setInterval()的更多相关文章

  1. js中的计时器事件`setTimeout()` 和 `setInterval()`

    js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...

  2. JS动画三剑客——setTimeout、setInterval、requestAnimationFrame

    一.前言 前端实现动画效果主要有以下几种方法:CSS3中的transition 和 animation ,Javascript 中可以通过定时器 setTimeout.setinterval,HTML ...

  3. 前端开发：setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  4. JavaScript定时机制setTimeout与setInterval研究

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

  5. JavaScript Timing 事件及两种时钟写法

    JavaScript 可以在时间间隔内执行. 这就是所谓的定时事件( Timing Events). ------------------------------------------------- ...

  6. 定时刷新之setTimeout（只一次）和setInterval（间隔相同时间）的使用

    setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...

  7. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  8. Javascript异步编程之setTimeout与setInterval详解分析(一)

    Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...

  9. 【转】Javascript异步编程之setTimeout与setInterval

    Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...

随机推荐

  1. [转帖]rpm包和deb分别是什么？

    https://www.cnblogs.com/hanfanfan/p/9133789.html 需要不停的学习才可以. 一.RMP 是 LINUX 下的一种软件的可执行程序,你只要安装它就可以了.这 ...

  2. [转帖]CentOS 7安装并启动Google浏览器（★firecat亲测有效★）

    CentOS 7安装并启动Google浏览器(★firecat亲测有效★) https://blog.csdn.net/libaineu2004/article/details/82821405 自己 ...

  3. .Net Core 3.0使用Grpc进行远程过程调用

    因为.Net Core3.0已经把Grpc作为一等臣民了,作为爱好新技术的我,当然要尝鲜体验一下了,当然感觉是Grpc作为跨语言的产品做的相当好喽,比起Dubbo这种的,优势和劣势还是比较明显的. 我 ...

  4. 有关最短路上的第k小/大值的总结

    1.USACO08JAN  Telephone Lines 题面 由于问的是最大值最小,所以二分加验证就好了 比较显然的,题干问的是第k+1长的路最短: 那么二分答案是正确的方向: 但是怎么验证? 我 ...

  5. Android开发build出现java.lang.NumberFormatException: For input string: "tle 0x7f0800aa"错误的解决方案

    查看异常栈没有发现项目代码的问题,因为问题是出现在layout文件中. 全局查找tle这个,发现在某个layout文件中title一词被变成ti tle了,结果Android就xjb报错了. 参考

  6. button标签与input type=button标签使用的差异

    button标签和input type=button标签都是html文档中用来表示按钮属性的元素,不过他们在布局和实际使用功能中存在一些差异. 下面将项目中遇到的一些总结如下: 1.属性和布局差异. ...

  7. Azure中配置和发布 Nginx docker到互联网

    当Azure build一个Niginx docker 镜像时,无法通过浏览器访问这个镜像,于是想到了把这个网站发布到互联网中,这样就能验证网站是否正确. 本问跳过如何创建Azure Ubantu的虚 ...

  8. 部署k8s集群之环境搭建和etcd单节点安装

    环境搭建以及etcd 单节点安装过程 安装之前的环境搭建 在进行k8s安装之前先把虚拟机准备好,这里准备的是三台虚拟机 主机名 ip地址 角色 master 172.16.163.131 master ...

  9. 4种常用的Ajax请求方式

    在jQuery中,AJAX常见的请求方式主要有一下4种: 1.$.ajax()返回其创建的 XMLHttpRequest 对象 $.ajax() 只有一个参数:参数key/value对象,包含各配置及 ...

  10. （转）Java并发编程：核心理论

    原文链接:https://www.cnblogs.com/paddix/p/5374810.html Java并发编程系列: Java 并发编程:核心理论 Java并发编程:Synchronized及 ...