实例讲解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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 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缓存技术的使用说明
2011/08/06 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
python中while和for的区别总结
2019/06/28 Python
pytorch 共享参数的示例
2019/08/17 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
Java程序员面试题
2016/09/27 面试题
国家助学金获奖感言
2014/01/31 职场文书
班级体育活动总结
2014/07/05 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
前台岗位职责
2015/02/13 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
Python 线程池模块之多线程操作代码
2021/05/20 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis