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. java 常用jar包方法

    1.Mapper3   常用接口 https://blog.csdn.net/fangwenzheng88/article/details/78713091 2.分页 pageHelper

  2. 云风协程库coroutine源码分析

    前言 前段时间研读云风的coroutine库,为了加深印象,做个简单的笔记.不愧是大神,云风只用200行的C代码就实现了一个最简单的协程,代码风格精简,非常适合用来理解协程和用来提升编码能力. 协程简 ...

  3. Job for jenkins.service failed because the control process exited with error code.

    root@xiakaibi-PC:~# service jenkins restartJob for jenkins.service failed because the control proces ...

  4. Next Closest Time

    Given a time represented in the format "HH:MM", form the next closest time by reusing the ...

  5. Ubuntu-虚拟机-忘记登陆密码

    前提 在我们使用Ubuntu虚拟机的过程中,偶尔会出现密码忘了的尴尬事情.里面又有重要资料,不能重新安装,这时我们要重置密码,接下来,让我们共同学习! 重启虚拟机-重启时按住 shift 会出现以下 ...

  6. Redis 以及 Python操作Redis

    Redis Redis是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis有以下特点: -- Redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可 ...

  7. oracle 插入数据之坑--------oracle字符类型varchar2一个中文占多少字节

    如果你误认为是两个字节,那就大错特错了 Oracle 一个中文汉字 占用几个字节,要根据Oracle中字符集编码决定 查看oracle server端字符集 select userenv('langu ...

  8. spark教程(12)-生态与原理

    spark 是目前非常流行的大数据计算框架. spark 生态 Spark core:包含 spark 的基本功能,定义了 RDD 的 API,其他 spark 库都基于 RDD 和 spark co ...

  9. redmine3.4.6安装教程

    Redmine 是一个开源的.基于Web的项目管理和缺陷跟踪工具. 参考了网上各种文章,终于成功安装redmine-3.4.6. 1.下载安装railsinstaller-3.4.0.exe 官网下载 ...

  10. ionic 提示 Error: Could not find gradle wrapper within Android SDK.

    Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK. 到And ...