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 相关文章推荐
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
Web应用开发TypeScript使用详解
May 25 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+MySQL删除操作实例
2015/01/21 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
php算法实例分享
2015/07/14 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
jQuery select控制插件
2009/08/17 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
Django的models中on_delete参数详解
2019/07/16 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python怎么判断模块安装完成
2020/06/19 Python
Python colormap库的安装和使用详情
2020/10/06 Python
python如何写个俄罗斯方块
2020/11/06 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
三年级数学教学反思
2014/01/31 职场文书
护士个人自我鉴定
2014/03/24 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python