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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
javascript 一些用法小结
Sep 11 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
jQuery返回定位插件详解
May 15 jQuery
Angular实现响应式表单
Aug 04 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
详解webpack-dev-middleware 源码解读
Mar 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
php下载远程文件类(支持断点续传)
2008/11/14 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
pandas实现选取特定索引的行
2018/04/20 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
python 操作hive pyhs2方式
2019/12/21 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
工程总经理工作职责
2013/12/09 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
服装设计专业求职信
2014/06/16 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
Redis批量生成数据的实现
2022/06/05 Redis