JavaScript 的定时(Timing )事件——setTimeout()与setInterval()
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()的更多相关文章
- js中的计时器事件`setTimeout()` 和 `setInterval()`
js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...
- JS动画三剑客——setTimeout、setInterval、requestAnimationFrame
一.前言 前端实现动画效果主要有以下几种方法:CSS3中的transition 和 animation ,Javascript 中可以通过定时器 setTimeout.setinterval,HTML ...
- 前端开发:setTimeout与setInterval 定时器与异步循环数组
前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...
- JavaScript定时机制setTimeout与setInterval研究
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...
- JavaScript Timing 事件及两种时钟写法
JavaScript 可以在时间间隔内执行. 这就是所谓的定时事件( Timing Events). ------------------------------------------------- ...
- 定时刷新之setTimeout(只一次)和setInterval(间隔相同时间)的使用
setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...
- Javascript定时器(二)——setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...
- Javascript异步编程之setTimeout与setInterval详解分析(一)
Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...
- 【转】Javascript异步编程之setTimeout与setInterval
Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...
随机推荐
- 用ufile和S3代替hdfs存储数据
一,添加ufile需在配置中添加: core-site.xml添加如下配置:<property><name>fs.ufile.impl</name><valu ...
- sql server备份损坏
sql server备份损坏 转自:https://www.cnblogs.com/zhijianliutang/p/4080916.html 1.备份文件和数据库放在同一个(或一组)的物理磁盘上.磁 ...
- 自然语言处理工具hanlp 1.7.3版本更新内容一览
HanLP 1.7.3 发布了.HanLP 是由一系列模型与算法组成的 Java 工具包,目标是普及自然语言处理在生产环境中的应用.HanLP 具备功能完善.性能高效.架构清晰.语料时新.可自定义的特 ...
- 手写一个python迭代器
分析 我们都知道一个可迭代对象可以通过iter()可以返回一个迭代器. 如果想要一个对象称为可迭代对象,即可以使用for,那么必须实现__iter __()方法. 在一个类的实例对象想要变成迭代器,就 ...
- Ubuntu14.04安装Caffe(CPU)
一 安装Ubuntu14.04LTS Ubuntu分区 1.SWAP 交换分区:与物理内存相当. 2.“/” 根目录分区:该区大小由硬盘大小而定,10-100G. 3.“HOME” 家目录分区:该区也 ...
- bash 转换为C代码
bash 转换为C代码,并编译为可执行文件 [root@localhost ~]# wget http://www.datsi.fi.upm.es/~frosal/sources/shc-3.8.9. ...
- server001
- hive报错java.sql.SQLException: null, message from server: "Host '192.168.126.100' is not allowed to connect to this MySQL server"
- 淘宝flexible.js的使用
首先大家最关注的怎么使用,原理不原理是后面的事 比如设计稿量来的宽度是100px 那么我们布局的时候,就这么写{width:1.3333rem},1.3333rem是由100/75算出来的,以此类推2 ...
- python之itertools
Python的内建模块itertools提供了非常有用的用于操作迭代对象的函数. count 创建一个迭代器,生成从n开始的连续整数,如果忽略n,则从0开始计算(注意:此迭代器不支持长整数) 如果超出 ...