实例讲解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 相关文章推荐
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
理解Javascript闭包
Nov 01 Javascript
Express.JS使用详解
Jul 17 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
关于ES6尾调用优化的使用
Sep 11 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
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
python 用下标截取字符串的实例
2018/12/25 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
人事助理自荐信
2014/02/02 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
校园元旦活动总结
2014/07/09 职场文书
补充协议书
2015/01/28 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
爱国主义影片观后感
2015/06/18 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技