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. 数据库 ----jdbc连接池的弊端

    jdbc连接池的弊端 1.数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁连接开启和关闭,造成数据库资源浪费,影响 数据库性能.设想:使用数据库连接池管理数据库连接.2.将sql语句硬编码到 ...

  2. php调用shell的方法

    一.配置 查看php.ini中配置是否打开安全模式,主要是以下三个地方safe_mode =  (这个如果为off下面两个就不用管了)disable_functions = safe_mode_exe ...

  3. SpringDataRedis配置

    1.父pom.xml配置依赖包 <dependencyManagement> <dependencies> <dependency> <groupId> ...

  4. 手写Spring MVC

    闲及无聊 又打开了CSDN开始看一看有什么先进的可以学习的相关帖子,这时看到了一位大神写的简历装X必备,手写Spring MVC. 我想这个东西还是有一点意思的 就拜读了一下大佬的博客 通读了一遍相关 ...

  5. CodeForces 820B + 821C

    (点击题目即可查看原题) 820B Mister B and Angle in Polygon  题意:在一个正n边形中,每个顶点按顺序记为1~n,正n边形中任意三点顶点组成一个角,∠x1x2x3,问 ...

  6. APP_测试流程(测试点)

    1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试时间. 1.3测试资 ...

  7. python-day10(正式学习)

    目录 字符编码 计算机基础 文本编辑器存取文件的原理 python解释器执行py文件的原理 python解释器与文本编辑的异同 字符编码介绍 字符编码的分类 乱码分析 总结 文件操作 三种基本操作 文 ...

  8. ElasticSearch工作原理与优化

    elasticsearch设计的理念就是分布式搜索引擎,底层其实还是基于lucene的,通过倒排索引的方式快速查询.比如一本书的目录是索引,然后快速找到每一章的的文本内容这种叫正向索引:而如果一件衣服 ...

  9. freemarker的replace的使用

    1.replace替换: <#assign name="sdfsfdsa\ndfsafs\n"> 例子:${name?replace("\n",&q ...

  10. Delphi Button组件