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教程
Jun 09 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
js 实现验证码输入框示例详解
Sep 23 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
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
党员批评与自我批评
2014/02/12 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
推广普通话主题班会
2015/08/17 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android