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 相关文章推荐
高效率JavaScript编写技巧整理
Aug 23 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php 随机生成10位字符代码
2009/03/26 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
php的ajax简单实例
2014/02/27 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
Javascript的this用法
2017/01/16 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
Python易忽视知识点小结
2015/05/25 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
解决c++调用python中文乱码问题
2020/07/29 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
学生爱国演讲稿
2014/01/14 职场文书
总经理助理职责
2014/02/04 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
社区母亲节活动总结
2015/02/10 职场文书
宣传部部长竞选稿
2015/11/21 职场文书