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 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
javascript之函数直接量(function(){})()
2007/06/29 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
Python 中 Meta Classes详解
2016/02/13 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python非递归全排列实现方法
2017/04/10 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
使用python存储网页上的图片实例
2018/05/22 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
python如何保存文本文件
2020/06/07 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
2015年学校心理健康教育工作总结
2015/05/11 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python