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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 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 print类函数使用总结
2010/06/25 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
python中MySQLdb模块用法实例
2014/11/10 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
python实现逻辑回归的示例
2020/10/09 Python
自动化专业毕业生自荐信
2013/11/01 职场文书
初中政治教学反思
2014/01/17 职场文书
暑期社会实践方案
2014/02/05 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
项目经理任命书
2014/06/04 职场文书
ktv好的活动方案
2014/08/17 职场文书
python urllib库的使用详解
2021/04/13 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL