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 相关文章推荐
javascript 出生日期和身份证判断大全
Nov 13 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
浅谈Angular中ngModel的$render
Oct 24 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
js倒计时抢购实例
2015/12/20 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
python实现保存网页到本地示例
2014/03/16 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
中国文明网签名寄语
2014/01/18 职场文书
文秘人员工作职责
2014/01/31 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
领导干部作风建设总结
2014/10/23 职场文书
趣味运动会广播稿
2015/08/19 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis