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 相关文章推荐
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
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正则匹配汉字的方法介绍
2013/04/25 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
鼠标图片振动代码
2006/07/06 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
python自动翻译实现方法
2016/05/28 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python内存读写操作示例
2018/07/18 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Django URL参数Template反向解析
2020/11/24 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
公司庆典活动邀请函
2014/01/09 职场文书
药品采购员岗位职责
2014/02/08 职场文书
入股协议书范本
2014/11/01 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
开天辟地观后感
2015/06/09 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
python实现自动化群控的步骤
2021/04/11 Python
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript