JavaScript定时器setTimeout()和setInterval()详解


Posted in Javascript onAugust 18, 2017

本文实例为大家分享了JavaScript定时器的具体方法,供大家参考,具体内容如下

1、 超时调用setTimeout()

顾名思义,超时调用的意思就是在一段实际之后调用(在执行代码之前要等待多少毫秒)

setTimeout()他可以接收两个参数:

1.要执行的代码或函数

2.毫秒(在执行代码之前要等待多少毫秒)

function test(){
 alert("孙悟空");
}
setTimeout(test,2000);//2s后弹出 “孙悟空”

clearTimeout()

clearTimeout,表示清除定时器,可以用它取消未执行的调用

var timmer=function test(){
 alert("孙悟空");
}
setTimeout(test,2000); //2s后弹出 “孙悟空”  
clearTimeout(timmer); //取消定时器,因为前者在两秒后调用,调用之前已经取消相当于什么也没发生

2、间歇调用setInterval()

间歇调用就是指定的时间内不断地重复执行代码,大白话就是“一会调用一次,一会调用一次”

setInterval()它也接收两个参数,与前者相同:

1.要执行的代码或函数

2.毫秒(在执行代码之前要等待多少毫秒)

function test(){
 alert("孙悟空");
}
setInterval(test,2000);//每隔2s后弹出一次 “孙悟空”

clearInterval()

clearInterval()与clearTimeout()使用方法相同,也是清除定时器方法

var num=0;
var max=10;
function test(){
 num++;
 if (num==max){
  clearInterval(timer); //累加到10时清除清定时器
  alert("这里有"+num+"个孙悟空"); //这里有10个孙悟空
 }
}
timer=setInterval(test,500);

 在上面的例子中,变量num每隔0.5s递增一次,当递增到最大值时就会清除先前设置的定时器(间歇调用)。

这个模式也可以用超时调用来实现

var num=0;
var max=10;
function test(){
 num++;
 if (num<max){
  setTimeout(test,500);
 }else{
  alert("这里有"+num+"个孙悟空")
 }
}
setTimeout(test,500);

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

Javascript 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
ECMAscript 变量作用域总结概括
Aug 18 #Javascript
微信小程序之前台循环数据绑定
Aug 18 #Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 #Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 #Javascript
详谈innerHTML innerText的使用和区别
Aug 18 #Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 #Javascript
webpack2.0配置postcss-loader的方法
Aug 17 #Javascript
You might like
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
JavaScript 事件系统
2010/07/22 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
对python Tkinter Text的用法详解
2018/10/11 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
项目建议书范文
2014/05/12 职场文书
个性车贴标语
2014/06/24 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
自查自纠工作总结
2014/10/15 职场文书
领导工作表现评语
2015/01/04 职场文书
机关保密工作承诺书
2015/05/04 职场文书
Redis性能监控的实现
2021/07/09 Redis
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技