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下onpropertychange事件的绑定方法
Aug 01 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
在node中如何使用 ES6
Apr 22 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 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
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
js比较和逻辑运算符的介绍
2013/03/10 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
python抓取网页中的图片示例
2014/02/28 Python
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python版名片管理系统
2018/11/30 Python
python selenium firefox使用详解
2019/02/26 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
周年庆典主持词
2014/04/02 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
2014年项目工作总结
2014/11/24 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python