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如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
window.onload使用指南
Sep 13 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
Less 安装及基本用法
2018/05/05 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Pycharm github配置实现过程图解
2020/10/13 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
食堂标语大全
2014/06/11 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
文明单位创建材料
2014/12/24 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS