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 相关文章推荐
accesskey 提交
Jun 26 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
JavaScript中DOM详解
Apr 13 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
php Xdebug的安装与使用详解
2013/06/20 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
Node.js实现文件上传
2016/07/05 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python实现感知器算法(批处理)
2019/01/18 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python通过实例讲解反射机制
2019/10/17 Python
opencv python如何实现图像二值化
2020/02/03 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
广州盈通面试题
2015/12/05 面试题
大二法英学生职业生涯规划范文
2014/02/27 职场文书
银行职员自我鉴定
2014/04/20 职场文书
明星邀请函
2015/02/02 职场文书