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 &amp; json的省市区联动代码
Jun 26 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
vue.js循环radio的实例
Nov 07 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
多重?l件?合查?(二)
2006/10/09 PHP
Smarty模板快速入门
2007/01/04 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python模块smtplib学习
2018/05/22 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
目前最全的python的就业方向
2018/06/05 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python修改txt文件中的某一项方法
2018/12/29 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
为什么是 Python -m
2020/06/19 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
模具数控专业自荐信
2014/01/27 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
边城读书笔记
2015/06/29 职场文书