JavaScript 计时事件-setInterval()-clearInterval() -setTimeout()-clearTimeout()
(PS:JavaScript 一个设定的时间间隔之后来执行代码,我们称之为计时事件。)
JavaScript 计时事件
通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setTimeout() - 暂停指定的毫秒数后执行指定的代码
Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码
语法
window.setInterval() 方法可以不使用window前缀,直接使用函数setInterval()。
setInterval() 第一个参数是函数(function)。
第二个参数间隔的毫秒数
注意: 1000 毫秒是一秒。
实例
每三秒弹出 "hello" :
实例展示了如何使用 setInterval() 方法,但是每三秒弹出一次对用户体验并不好。
以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码,就是手表一样。
实例
显示当前时间
function
myTimer()
{
var d=new Date();
var
t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
如何停止执行?
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
语法
window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:
然后你可以使用clearInterval() 方法来停止执行。
实例
以下例子,我们添加了 "Stop time" 按钮:
<button onclick="myStopFunction()">Stop
time</button>
<script>
var
myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var
d=new Date();
var
t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function
myStopFunction()
{
clearInterval(myVar);
}
</script>
setTimeout() 方法
语法
setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示:1000 毫秒等于一秒。
实例
等待3秒,然后弹出 "Hello":
如何停止执行?
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
语法
window.clearTimeout() 方法可以不使用window 前缀。
要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:
如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。
实例
以下是同一个实例, 但是添加了 "Stop the alert" 按钮:
function
myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function
myStopFunction()
{
clearTimeout(myVar);
}
JavaScript 计时事件-setInterval()-clearInterval() -setTimeout()-clearTimeout()的更多相关文章
- JavaScript 计时事件
JavaScript 计时事件 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. 在 JavaScritp 中使用计 ...
- 16 JavaScript计时事件&显示时钟
计时事件:JavaScript设定一定的时间间隔之后来执行代码 window.setInterval("JavaScript function",millisecons):间隔指定 ...
- javaScript 笔记(4) -- 弹窗 & 计时事件 & cookie
弹窗 可以在 JavaScript 中创建三种消息框:警告框.确认框.提示框. 警告框:经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: window ...
- js中setInterval与setTimeout用法
setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: ...
- js中setInterval与setTimeout用法 实现实时刷新每秒刷新
setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: ...
- js计时事件
通过在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件. 1. setTimeout()--暂停指定的时间后执行指定的代码 clearTimeout ()--停止se ...
- JavaScript 计时
http://www.w3school.com.cn/js/js_timing.asp JavaScript 计时事件 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码 ...
- JavaScript计时
JavaScript计时分两种 setTimeout:程序在隔几秒后执行 语法: setTimeout(function(){要执行的程序},xxxx) setInterval:程序每隔几秒执行 语法 ...
- JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结
已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...
随机推荐
- UICollectionView笔记1
WWDC 2012 Session笔记——205 Introducing Collection Views 这是博主的WWDC2012笔记系列中的一篇,完整的笔记列表可以参看这里.如果您是首次来到本站 ...
- iOS书摘之Objective-C编程之道 iOS设计模式解析
来自<Objective-C编程之道iOS设计模式解析>一书的摘要总结 一.Prototype 原型模式 定义:使用原型实例指定创建对象的种类,并通过复制这个原型创建新的对象.(<设 ...
- redhat配置dns服务器bind
配置Oracle11g的RAC需要使用DNS服务器来解析SCAN IP,本文就是以此为例介绍bind服务器的使用.首先科普一下bind服务器,属于企业级产品了,还是开源的: Bind是Berkeley ...
- springboot 学习笔记(七)
(七)springboot整合activemq,消息消费,以及发送对象消息 1.springboot整合activemq发送消息,上一节已经介绍了,现在要对消息队列中的内容进行处理,下面写一个cons ...
- spring的工厂方法
http://blog.csdn.net/nvd11/article/details/51542360
- Django的路由层和视图层
一丶Django 的路由层(URLconf) URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django ...
- JS获取本地文件并且解析文件内容(XML,TXT)
$(function(){ $("body").on("change", "#file", function (event) { uploa ...
- Spark性能优化——和shuffle搏斗
Spark的性能分析和调优很有意思,今天再写一篇.主要话题是shuffle,当然也牵涉一些其他代码上的小把戏. 以前写过一篇文章,比较了几种不同场景的性能优化,包括portal的性能优化,web se ...
- 2017.12.1 如何用java写出一个菱形图案
上机课自己写的代码 两个图形原理都是一样的 1.一共有仨个循环 注意搞清楚每一层循环需要做的事情 2.第一层循环:是用来控制行数 3.第二层循环控制打印空格数 4.第三层循环是用来循环输出星星 imp ...
- 分词,复旦nlp,NLPIR汉语分词系统
http://www.nlpir.org/ http://blog.csdn.net/zhyh1986/article/details/9167593