实例讲解JavaScript 计时事件


Posted in Javascript onJuly 04, 2020

JavaScript 计时事件

通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

  • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
  • setTimeout() - 在指定的毫秒数后执行指定代码。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

语法

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用 window 前缀,直接使用函数 setInterval()。

setInterval() 第一个参数是函数(function)。

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

setInterval(function(){alert("Hello")},3000);

效果如下:

实例讲解JavaScript 计时事件

实例展示了如何使用 setInterval() 方法,但是每三秒弹出一次对用户体验并不好。

以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码,就是手表一样。

var myVar=setInterval(function(){myTimer()},1000);
 
function myTimer()
{
  var d=new Date();
  var t=d.toLocaleTimeString();
  document.getElementById("demo").innerHTML=t;
}

效果如下:

实例讲解JavaScript 计时事件

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:

myVar=setInterval("javascript function",milliseconds);

然后你可以使用 clearInterval() 方法来停止执行。

以下例子,我们添加了 "停止" 按钮:

<p id="demo"></p>
<button onclick="myStopFunction()">停止</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>

效果如下:

实例讲解JavaScript 计时事件

setTimeout() 方法

语法

myVar= window.setTimeout("javascript function", milliseconds);

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示:1000 毫秒等于一秒。

实例

等待3秒,然后弹出 "Hello":

setTimeout(function(){alert("Hello")},3000);

效果如下:

实例讲解JavaScript 计时事件

如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。

实例

以下是同一个实例, 但是添加了 "Stop the alert" 按钮:

var myVar;
 
function myFunction()
{
  myVar=setTimeout(function(){alert("Hello")},3000);
}
 
function myStopFunction()
{
  clearTimeout(myVar);
}

效果如下:

实例讲解JavaScript 计时事件

以上就是实例讲解JavaScript 计时事件的详细内容,更多关于JavaScript 计时事件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 #Javascript
详解Vue.js 响应接口
Jul 04 #Javascript
JavaScript中数组去重的5种方法
Jul 04 #Javascript
JS制作简易计算器的实例代码
Jul 04 #Javascript
基于原生js实现九宫格算法代码实例
Jul 03 #Javascript
JavaScript DOM常用操作代码汇总
Jul 03 #Javascript
JavaScript缺少insertAfter解决方案
Jul 03 #Javascript
You might like
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
php实现简单爬虫的开发
2016/03/28 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
在Python中append以及extend返回None的例子
2019/07/20 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
python颜色随机生成器的实例代码
2020/01/10 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
大二自我鉴定范文
2013/10/05 职场文书
求职者简历中的自我评价
2013/10/20 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
生日宴会策划方案
2014/06/03 职场文书
2014年图书室工作总结
2014/12/09 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python