实例讲解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 相关文章推荐
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
简单的分页代码js实现
May 17 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
Angular2入门--架构总览
Mar 29 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
利用node.js开发cli的完整步骤
Dec 29 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php分页示例代码
2007/03/19 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python中的__init__作用是什么
2020/06/09 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
高级电工工作职责
2013/11/21 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers