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 性能优化指南(2)
May 21 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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和ACCESS写聊天室(九)
2006/10/09 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP伪静态写法附代码
2008/06/20 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
php 保留字列表
2012/10/04 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP学习笔记之session
2018/05/06 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
超简单使用Python换脸实例
2019/03/27 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Python中and和or如何使用
2020/05/28 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
C语言编程题
2015/03/09 面试题
工商管理自荐书
2014/07/06 职场文书
迎国庆演讲稿
2014/09/05 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
优秀教师事迹材料
2014/12/15 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫