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 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
javascript 有用的脚本函数
May 07 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
js数组去重的方法汇总
Jul 29 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
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
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
基于PHP制作验证码
2016/10/12 PHP
php输出图像的方法实例分析
2017/02/16 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
javascript date格式化示例
2013/09/25 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
详解Python中where()函数的用法
2018/03/27 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
护士长竞聘演讲稿
2014/04/30 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
Python jiaba库的使用详解
2021/11/23 Python