BOM-使用定时器
window对象包含4个定时器专用方法,说明如下表所示,使用它们可以实现代码定时运行,避免连续执行,这样可以设计动画
| 方法 | 说明 |
| setInterval() | 按照指定的周期,(以毫秒为单位)来调用函数或计算表达式 循环执行 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 执行一次 |
| clearInterval() | 取消由setInterval()方法生成的定时器对象 |
| clearsetTimeout() | 取消由setTimeout()方法生成的定时器对象 |
setTimeout()方法
setTimeout()方法能够在指定的时间段后执行特定代码,用法如:
var o=setTimeout(code,delay)
参数code表示要延迟执行的代码字符串,该字符串语句可以在window环境下执行,如果包含多个语句,应该使用分号进行分割。
delay表示延迟的时间,以毫秒为单位,该方法返回的值是一个TimerID,这个ID编号指向延迟执行的代码控制句柄,如果把这个句柄
传递给clearTimeout()方法,则会取消代码的延迟执行。
var p=document.getElementsByTagName("p")[0];
p.onclick=function(){
var b=setTimeout(function(){
alert(p.style.color="red");
},5000);
clearTimeout(b); //清除timeout延迟
}
setTimeout()方法的第1个参数虽然是字符串,但是我们也可以把javascript代码封装在一个函数体内,然后把喊出引用作为参数传递给setTimeout()方法,
等待延迟调用,这样就避免了传递字符串的疏漏和麻烦。注意:函数可以作为参数,作为值,作为表达式
setInterval()方法
使用setTimeout()方法模拟循环执行指定代码,不如直接setInterval()方法来实现,setInterval()方法能够周期性执行指定的代码,如果不加以处理,那么该方法将会被持续
执行,知道浏览器窗口关闭,或者跳转到其他页面为止。用法如下
var a=setInterval(code,Interval);
该方法的用法与setTimeout()方法基本相同,其中参数code表示要周期执行的代码字符串,而Interval参数表示周期执行的时间间隔,以毫秒为单位,该方法返回的值是一个TimerID
,这个ID编号指向对当前周期函数的执行引用,利用该值对计时器进行访问,如果把这个值传递给clearInterval()方法,则会强制取消周期性执行的代码。
var p=document.getElementsByTagName("p")[0];
var out=setInterval(f,1000);
var i=0;
function f(){
p.innerText=i++;
if(i>10){
clearInterval(out);
alert("10秒钟已经到了");
}
}
setTimeout和setInterval方法在用法上有几分相似,不过两者的作用区别也很明显,setTimeout方法主要用来延迟代码执行的,而setInterval方法主要实现周期性执行代码。
BOM-使用定时器的更多相关文章
- BOM以及定时器
一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...
- 13 -1 BOM和定时器
一 BOM JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元 ...
- BOM心得-定时器
写在前面的话:之前一直以为定时器的返回值是Object类型,所以timer初始化也是写null,今天发现返回值是number,进而发觉这个返回值代表的是定时器的索引,指代这是第几个定时器 个人觉得只用 ...
- BOM之定时器
JavaScript中的时间是通过定时器控制的,他们分别是window.setInterval和window.setTimeout,我们当然可以省略window,直接使用方法名称调用. 一 s ...
- JS中定时器的返回数值ID值
定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除. setInterval()/setTimeout()BOM中的Wind ...
- web前端面试第一次[定时器]
BOM中定时器--计时器 定时器参数两个:(函数,时间(单位ms(1000ms=1s))) 时间设置1s,每过1s执行一次函数 //设置定时器 setInterval(funtion(){ alert ...
- 前端3 — js — BOM没完( 不了解也行 )
1.js是什么? -- 英文全称javascript javaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚 ...
- Web前端学习路线
第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- 关于web前端的学习路线
第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- (1)写给Web初学者的教案-----学习Web的知识架构
1:学习Web的知识架构 前文中我们简单的介绍了一些关于Web的基本知识,这里任老师再次强调一下凡是用浏览器打开的网站我们就称之为Web应用程序(B/S结构).除此之外其它需要下载安装的软件或是手机 ...
随机推荐
- 解决vs2015引用时没有Report Viewer的问题
1.选择“工具”>“Nuget包管理器”>“程序包管理器控制台” 执行命令:Install-Package Microsoft.ReportingServices.ReportViewer ...
- 浅谈java classloader
本文由作者张远道授权网易云社区发布. 类加载器三杰 jvm有三类classloader,分别是bootstrap classloader,extended classloader以及system cl ...
- python web开发c6——阿里云上ubuntu+flask+gunicorn+nginx服务器部署(一)简单测试
简述 Nginx在服务器部署中的作用 请求通过Nginx实现反向代理,将请求提交给代理服务器.本文中只用了一台服务器,所以是代理到本机. gunicorn的作用 作为服务器代码的容器.接收Nginx的 ...
- FFMpeg音频重采样和视频格式转
一.视频像素和尺寸转换函数 1.sws_getContext : 像素格式上下文 --------------->多副图像(多路视频)进行转换同时显示 2.struct SwsContext ...
- Python3.5 学习十二 数据库介绍
MYSQL介绍: 主流三种数据库:Oracle.Mysql.Sqlserver Mysql安装和启动: windows 1安装 2启动服务 3进入bin目录,打开命令行 4 mysqladmin -u ...
- 面向对象进阶-类的内置方法 __str__ 、__repr__、__len__、__del__、__call__(三)
# 内置的类方法 和 内置的函数之间有着千丝万缕的联系# 双下方法# obj.__str__ str(obj)# obj.__repr__ repr(obj) # def __str__(self): ...
- python中实现三目运算
python中没有其他语言中的三元表达式,不过有类似的实现方法 如: a = 1 b =2 k = 3 if a>b else 4 上面的代码就是python中实现三目运算的一个小demo, 如 ...
- 合服导致 globalserver 起不来的问题
globalserver 报错 RMIInitArmyBackObject InitError 根据报错信息一路追查下来,发现某个帮派的数据解析 json 的时候报错.监视变量,找出这段字符串,大致结 ...
- QQ个人信息保护 | 攻的对面叫防
近来我们愈来愈重视个人信息保护,当接到骚扰电话时,你心里或许在想(我手机号怎么又被别人知道的?别人是怎么知道我手机号的?),现在的时代,手机已或不可缺,QQ几乎每个人都在用.而有些人总想保护个人QQ资 ...
- docker registry push错误“server gave HTTP response to HTTPS client”
系统环境:centos7 docker版本: 1.12.3(注意版本,可能存在不同版本设置不同的情况) docker registry版本:2.4.1 问题: 成功安装docker registry, ...