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去掉数组中的重复元素
Jan 13 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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 异常处理实现代码
2009/03/10 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
Python深入学习之特殊方法与多范式
2014/08/31 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
详解Django中的form库的使用
2015/07/18 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
在python中求分布函数相关的包实例
2020/04/15 Python
python中有帮助函数吗
2020/06/19 Python
详细分析Python collections工具库
2020/07/16 Python
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
饭店工作计划书
2014/01/10 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
python析构函数用法及注意事项
2021/06/22 Python
Win11 BitLocker 驱动器加密
2022/04/19 数码科技