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. shell作业01

    1.判断/etc/inittab文件是否大于100行,如果大于,则显示”/etc/inittab is a big file.”否者显示”/etc/inittab is a small file.” ...

  2. BUUOJ reverse 不一样的flag

    不一样的flag 是不是做习惯了常规的逆向题目?试试这道题,看你在能不能在程序中找到真正的flag!注意:flag并非是flag{XXX}形式,就是一个’字符串‘,考验眼力的时候到了! 注意:得到的 ...

  3. // TODO Auto-generated method stub 作用及设置

    当我们创建一个主方法类时,eclipse会默认插入一条注释语句: // TODO Auto-generated method stub 作用: // TODO Auto-generated metho ...

  4. 集合运算 - Java实现集合的交、并、差

    1.使用java的Set实现集合的交.并.差 package com.lfy.Set; import java.util.HashSet; import java.util.Set; /** * 集合 ...

  5. ABC136E Max GCD

    Thinking about different ways of thinking. --- LzyRapx 题目 思路比较容易想到. Observations: 每次操作过后和不变. 枚举和的因子 ...

  6. Windows下使用SVN版本控制工具

    一.SVN工作原理 SVN(SubVersion)的基本工作思路是这样的:在一台服务器上建立一个源代码库,库里可以存放许多不同项目的源程序,由源代码库管理员统一管理这些源程序. 每个用户在使用源代码库 ...

  7. C++ 多态、虚函数(virtual 关键字)、静态联编、动态联编

    函数重写:(在子类中重写父类中的函数) 父类中被重写的函数  依然会继承  给子类. 子类中重写的函数将覆盖父类中的函数. 通过作用域分辨符  ::  可以访问到父类中的函数. 例如: #includ ...

  8. Linux 安装 python3.6 ，并且配置 Pycharm 远程连接开发

    Linux下安装Python3.6和第三方库   如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境, 比如yum!!! ...

  9. 设置队列中文件上的“X”号的点击事件+uploadLimit动态加1

    目的:1.设置文件队列中“x”号的点击事件 2.每次删除服务器文件后,把uploadLimit + 1: 'onUploadSuccess': function (file, data, respon ...

  10. Spring Cloud netflix 概览和架构设计

    pring Cloud是基于Spring Boot的一整套实现微服务的框架.他提供了微服务开发所需的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全局锁.决策竞选.分布式会话和集群状态管理等 ...