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初学者编译简单的计算机

    package com.yj.test; import java.awt.BorderLayout; import java.awt.Font; import java.awt.GridLayout; ...

  2. 【Vue高级知识】细谈Vue 中三要素（响应式+模板+render函数）

    [Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809

  3. JavaRMI框架

     RMI(即Remote Method Invoke 远程方法调用).在Java中,只要一个类extends了java.rmi.Remote接口,即可成为存在于服务器端的远程对象,供客户端访问并提供一 ...

  4. rabbitmq五种消息模型整理

    目录 0. 配置项目 1. 基本消息模型 1.1 生产者发送消息 1.2 消费者获取消息(自动ACK) 1.3 消息确认机制(ACK) 1.4 消费者获取消息(手动ACK) 1.5 自动ACK存在的问 ...

  5. response.getWriter().wirte和out.print()的区别

    1.首先介绍write()和print()方法的区别:  (1).write():仅支持输出字符类型数据,字符.字符数组.字符串等  (2).print():可以将各种类型(包括Object)的数据通 ...

  6. C#派生类的构造函数

    构造函数的调用顺序是先调用System.Object,再按照层次结构由上向下(基类=>派生类)进行,直到到达编译器要实例化的类为止.在此过程中,每个构造函数都初始化自己类中的字段.编译器先自下而 ...

  7. markdown图片转换demo

    markdown图片转换demo 一直以来都是用Markdown来写博客的,但是它的图片嵌入实在是太让人头秃,逼得我能找网上的图片就不用自己的,实在是麻烦.所以我在发现了一个可以生成markdown样 ...

  8. k8s部分名称解释

    k8s部分名词解释 NameSpace:命名空间 Namespace是对一组资源和对象的抽象集合,比如可以用来将系统内部的对象划分为不同的项目组或用户组.常见的pods, services, repl ...

  9. java中的异常和处理详细理解

    异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. 比如说,你的代码少了一个分号,那么运行出来结果是提示是错误 java.lang.Error:如果你用System.ou ...

  10. SQL-Serverの自動採番(IDENTITY値)の取得・リセット

    システムに必要なテーブルで.自動的に番号を振っていくものが必要なときがあります. たとえば.各種の伝票データの伝票番号の様なものです. プログラム処理上.データを登録した直後に.自動採番された値を取得 ...