JavaScript setInterval()与setTimeout()计时器


Posted in Javascript onDecember 27, 2019

JavaScript是单线程语言,但是它可以通过设置超时值和间歇时间值来指定代码在特定的时刻执行。超时值是指在指定时间之后执行代码,间歇时间值是指每隔指定的时间就执行一次代码。

超时调用

超时调用使用window对象的setTimeout()方法,它接受两个参数:要执行的代码和以毫秒表示的时间(代码执行前的等待时间)。其中,第一个参数可以是一个字符串(和eval()中使用的字符串一样),也可以是一个函数。

JavaScript setInterval()与setTimeout()计时器

第二个参数是一个表示等待多长时间的毫秒数,但是在该时间过去后代码并不一定执行。JavaScript是一个单线程序的解释器,因此一定时间内只能执行一段代码。为了控制要执行的代码,就有一个JavaScript任务队列。这些任务会按照将它们添加到任务队列的顺序执行。setTimeout()的第二个参数告诉JavaScript再过多长时间把当前任务添加到队列中。如果队列是空的,那么添加的代码则会立即执行;如果队列不是空的,那么添加的代码会在前面的代码执行完毕后再执行。

调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取消超时调用。取消超时调用使用方法clearTimeout();

JavaScript setInterval()与setTimeout()计时器

间歇调用

间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或页面被卸载。设置间歇调用的方法是setInterval(),它接收的参数与setTimeout()相同。取消间歇调用的重要性远高于超时调用。

JavaScript setInterval()与setTimeout()计时器

但是通常情况下,很少真正使用间歇调用,因为后一个间歇调用可能在前一个间歇调用结束之前调用。因此,我们通常会使用超时调用来模拟间歇调用

JavaScript setInterval()与setTimeout()计时器

下面看两个小demo:

1、获得当前日期并让它显示在文本框内,点击“stop”按钮后事件静止。(间歇调用) 

 HTML代码:

<input type="text" size="50" id="clock" />
<input type="button" value="Stop" id="btn" />

JavaScript代码:

function clock(){
  var time = new Date();
  document.getElementById("clock").value = time;  
  var btn =document.getElementById("btn");
  btn.onclick = function(){
    clearInterval(t); 
  }
}
var t = setInterval(clock,1000);

2、使用setTimeou()实现计数统计效果,并在文本框中显示数值。

HTML代码:

<input type="text" id="count" />

JavaScript代码:

var num = 0;
function startCount(){
  document.getElementById("count").value = num;
  num += 1;
  setTimeout(startCount,1000);  //setTimeout是超时调用,使用递归模拟间歇调用
}  
setTimeout(startCount,1000);  //1s后执行

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
js取模(求余数)隔行变色
May 15 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
解决vue 退出动画无效的问题
Aug 09 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 #Javascript
React中使用UMEditor的方法示例
Dec 27 #Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 #Javascript
JavaScript中变量提升机制示例详解
Dec 27 #Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 #Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 #Javascript
node.js Promise对象的使用方法实例分析
Dec 26 #Javascript
You might like
PHP实现用户认证及管理完全源码
2007/03/11 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
js常用函数 不错
2006/09/08 Javascript
永不消失的title提示代码
2007/02/15 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
js实现随机抽奖
2020/03/19 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python logging模块原理解析及应用
2020/08/13 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
美国电视购物:QVC
2017/02/06 全球购物
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
公司培训心得体会
2014/01/03 职场文书
会议活动邀请函
2014/01/27 职场文书
安全演讲稿大全
2014/05/09 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL