你不知道的JavaScript--Item23 定时器的合理使用
1、定时器概述
window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：
window.setTimeout(expression,milliseconds);
window.setInterval(expression,milliseconds); 其中，expression可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时， 不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法的第二个参数是milliseconds，表示延时或者重复执行的毫秒数。下 面分别介绍两种方法。
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。
setTimeout("function",time)设置一个超时对象setInterval("function",time)设置一个超时对象
setInterval为自动重复，setTimeout不会重复。
clearTimeout(对象)清除已设置的setTimeout对象clearInterval(对象)清除已设置的setInterval对象
使用定时器实现JavaScript的延期执行或重复执行 .
2、具体使用
1．window.setTimeout方法
该方法可以延时执行一个函数，例如：
function hello(){
alert("hello");
}
window.setTimeout(hello,5000); 这段代码将使得页面打开5秒钟后显示对话框“hello”。其中最后一句也可以写为：
window.setTimeout("hello()",5000); 读者可以体会它们的差别，在window.setInterval方法中也有这样的性质。
如果在延时期限到达之前取消延执行，可以使用window.clearTimeout(timeoutId)方法，该方法接收一个id，表示一个定时器。这个id是由setTimeout方法返回的，例如：
function hello(){
alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){
window.clearTimeout(id);
} 这样，如果要取消显示，只需单击页面任何一部分，就执行了window.clearTimeout方法，使得超时操作被取消。
2．window.setInterval方法
该方法使得一个函数每隔固定时间被调用一次，是一个很常用的方法。如果想要取消定时执行，和clearTimeout方法类似，可以调用 window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如：
//定义一个反复执行的调用
var id=window.setInterval("somefunction",10000);
//取消定时执行
window.clearInterval(id); 3. Demo小练习
上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到setInterval方法，下面将设计一个秒表，来介绍setInterval 函数的用途：该秒表将包括两个按钮和一个用于显示时间的文本框。当单击开始按钮时开始计时，最小单位为0.01秒，此时再次单击按钮则停止计时，文本框显 示经过的时间。另外一个按钮用于将当前时间清零。其实现代码如下：
<html>
<head>
<title> New Document </title>
</head>
<body>
<form action="somepage.asp">
<input type="text" value="0" name="txt1"/>
<input type="button" value="开始" name="btnStart"/>
<input type="button" value="重置" name="btnReset"/>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//获取表单中的表单域
var txt=document.forms[0].elements["txt1"];
var btnStart=document.forms[0].elements["btnStart"];
var btnReset=document.forms[0].elements["btnReset"]
//定义定时器的id
var id;
//每10毫秒该值增加1
var seed=0;
btnStart.onclick=function(){
//根据按钮文本来判断当前操作
if(this.value=="开始"){
//使按钮文本变为停止
this.value="停止";
//使重置按钮不可用
btnReset.disabled=true;
//设置定时器，每0.01s跳一次
id=window.setInterval(tip,10);
}else{
//使按钮文本变为开始
this.value="开始";
//使重置按钮可用
btnReset.disabled=false;
//取消定时
window.clearInterval(id);
}
}
//重置按钮
btnReset.onclick=function(){
seed=0;
}
//让秒表跳一格
function tip(){
seed++;
txt.value=seed/100;
}
//-->
</script> 3. 给定时器调用传递参数
无论是window.setTimeout还是window.setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必须要带参数，这就需要想方法解决。例如对于函数hello(_name)，它用于针对用户名显示欢迎信息：
var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello,"+_name);
} 这时，如果企图使用以下语句来使hello函数延迟3秒执行是不可行的：
window.setTimeout(hello(userName),3000); 这将使hello函数立即执行，并将返回值作为调用句柄传递给setTimeout函数，其结果并不是程序需要的。而使用字符串形式可以达到想要的结果：
window.setTimeout("hello(userName)",3000); 这里的字符串是一段JavaScript代码，其中的userName表示的是变量。但这种写法不够直观，而且有些场合必须使用函数名，下面用一个小技巧来实现带参数函数的调用：
var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello,"+_name);
}
//创建一个函数，用于返回一个无参数函数
function _hello(_name){
return function(){
hello(_name);
}
}
window.setTimeout(_hello(userName),3000);
</script> 这里定义了一个函数_hello，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。在 window.setTimeout函数中，使用_hello(userName)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。
4. 正确认识定时器的“定时”功能
首先看一段代码
function display(){
alert(hello);
}
setTimeout("display()", 3000);
alert("你首先看到的是我！")代码先输出哪个？答案在程序中很明显。为什么呢？
初学者可能对Javascript的定时器有误解，认为它们是线程，其实Javascript是运行于单线程中的，而定时器仅仅是计划在未来的某个时间执行，而具体的执行时间是不能保证的，因为在页面的生命周期中，不同的时间可能有其它代码在控制Javascript的里进程。浏览器只是负责进行排序，指派某个代码在某个时间点运行。
下面说下Javascript线程，下图表示javascript进程时间线。
除了javascript执行进程外，还有一个需要在进程下一次空闲时间执行的代码队列，随着页面在其生命周期内的推移，代码会按照执行顺序添加到对列中，例如：当一个按钮被按下时，它的事件处理就会添加到队列中，并在下一个可能的时间内执行。
定时器对队列的工作方式是，当特定的时间过去后，将代码插入，注意添加到队列并不意味着它会马上执行，而只能说它会尽快执行，设定一个250ms后执行的定时器，不代表250ms后它会马上执行，它只会表示在250ms后被加入到队列中，如果这个时间点队列是空闲的，那么这段代码就会被执行。
请看以下代码：
var btn = document.getElementById("mybtn");
btn.onclick = function () {
setTimeout(function () {
document.getElementById("message").nodeName = "mymessage";
//其它代码
}, 250);
}对于定时器最要注意的是：指定的时间间隔表示何时将定时器的代码添加到队列中，而不是何时执行代码。关于这个onclick事伯处理的进程时间线请看下图：
系列文章导航：
3、你不知道的JavaScript–Item3 隐式强制转换
4、你不知道的JavaScript–Item4 基本类型和基本包装类型（引用类型）
6、你不知道的JavaScript–Item6 var预解析与函数声明提升（hoist ）
7、你不知道的JavaScript–Item7 函数和（命名）函数表达式
8、你不知道的JavaScript–Item8 函数，方法，构造函数调用
9、你不知道的JavaScript–Item9 call(),apply(),bind()与回调
10、你不知道的JavaScript–Item10 闭包（closure）
11、你不知道的JavaScript–Item11 arguments对象
12、你不知道的JavaScript–Item12 undefined 与 null
13、你不知道的JavaScript–Item13 理解 prototype, getPrototypeOf 和_ proto_
14、你不知道的JavaScript–Item14 使用prototype的几点注意事项
15、你不知道的JavaScript–Item15 prototype原型和原型链详解
16、你不知道的JavaScript–Item16 for 循环和for…in 循环的那点事儿
17、你不知道的JavaScript–Item17 循环与prototype最后的几点小tips
18、你不知道的JavaScript–Item18 JScript的Bug与内存管理
19、你不知道的JavaScript–Item19 执行上下文（execution context）
20、你不知道的JavaScript–Item20 作用域与作用域链（scope chain）
21、你不知道的JavaScript–Item21 漂移的this
22、你不知道的JavaScript–Item22 Date对象全解析
23、你不知道的JavaScript–Item23 定时器的合理使用
持续更新中。。。。。。
版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226
你不知道的JavaScript--Item23 定时器的合理使用的更多相关文章
- 《你不知道的JavaScript》整理（一）——作用域、提升与闭包
最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,里面分析了很多基础性的概念. 可以更全面深入的理解JavaScript深层面的知识点. 一.函数作用域 ...
- 你不知道的JavaScript上卷笔记
你不知道的JavaScript上卷笔记 前言 You don't know JavaScript是github上一个系列文章 初看到这一标题的时候,感觉怎么老外也搞标题党,用这种冲突性比较强的题目 ...
- 读《你不知道的JavaScript(上卷)》后感-作用域闭包（二）
github原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们, ...
- JavaScript中的this（你不知道的JavaScript）
JavaScript中的this,刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要,然而自己并不关心:随着自己对JavaScript一步步深入了解,突然恍然大悟,原来它真的很重要!所 ...
- 《你不知道的 JavaScript 上卷》 学习笔记
第一部分: 作用域和闭包 一.作用域 1. 作用域:存储变量并且查找变量的规则 2. 源代码在执行之前(编译)会经历三个步骤: 分词/此法分析:将代码字符串分解成有意义的代码块(词法单元) 解析/语法 ...
- 你不知道的JavaScript --- 作用域相关
本篇是<你不知道的JavaScript>的读书笔记 什么是作用域? 程序离不变量,那么变量存储在哪里?程序需要时如何找到他们? 这些问题说明需要一套设计良好的规则来存储变量, 并且之后可以 ...
- 《你不知道的javascript》读书笔记1
概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. js的工作原理 引擎:从头到尾负责整个js的编译和运行.(很大一部 ...
- JavaScript作用域闭包（你不知道的JavaScript）
JavaScript闭包.是JS开发project师必须深入了解的知识. 3月份自己曾撰写博客<JavaScript闭包>.博客中仅仅是简单阐述了闭包的工作过程和列举了几个演示样例,并没有 ...
- JS闭包—你不知道的JavaScript上卷读书笔记（二）
关于闭包,初学者会被绕的晕头转向,在学习的路上也付出了很多精力来理解. 让我们一起来揭开闭包神秘的面纱. 闭包晦涩的定义 看过很多关于闭包的定义,很多讲的云里雾里,晦涩难懂.让不少人以为闭包是多么玄乎 ...
随机推荐
- PS 图像调整算法——黑白
这个算法是参考自 阿发伯 的博客: http://blog.csdn.net/maozefa 黑白调整 Photoshop CS的图像黑白调整功能,是通过对红.黄.绿.青.蓝和洋红等6种颜色的比例调节 ...
- 【45】java的封装剖析
类是构造对象的模板或蓝图. 封装的一些概念 从形式上看,封装不过是将数据和行为组合到一个包中,并对对象的使用者隐藏了数据的实现形式. 每个对象都包含实例域和方法.实例域的集合代表了一个集合的状态,通过 ...
- 学习Selenium遇到的问题和解决方案
问题1:IE驱动位数问题,未安装对应的IE,打不开IE浏览器(已解决20180323) 使用Selenium启动IE浏览器的时候,报错,报错信息如下 org.openqa.selenium.remot ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- jquery作业
1. 通过jquery动态的创建一个表格,随机生成(id自增,name随机2-3个中文汉字(10个姓,20个名字),age随机100以内整数)大于50小于100行的数据(用户对象:id,name,ag ...
- JavaScript中将对象数组中的某个属性值，批量替换成另一个数值
原文链接 https://segmentfault.com/q/1010000010352622 希望将下列数组中的sh替换成沪,sz替换成深 var stooges = [ {label:1,val ...
- git push 报错 "Peer certificate cannot be authenticated with known CA certificates"
使用git push -u origin master 命令向远程仓库提交代码时报错:Peer certificate cannot be authenticated with known CA ce ...
- codechef Killing Monsters
题目大意:大厨正在玩一个打怪兽的小游戏.游戏中初始时有 n 只怪兽排成一排,从左到右编号为 0 ∼ n − 1.第 i 只怪兽的初始血量为 hi,当怪兽的血量小于等于 0 时,这只怪兽就挂了. 大厨要 ...
- 动态规划：给出两个字符串s1和s2，返回其中最大的公共子串
求公共子字符串问题(连续的) 这个题目是当时远景能源公司现场笔试的一道题目,当时根本就不知道动态规划是什么鬼,直接上来就暴力求解,面试官很谄媚的问我,你这能求出来吗?当时很年轻的说,能啊!现在想,当时 ...
- 怎样看Mac的日志
Mac自带的日志查看工具Console,注意Console和Terminal不是一码事,后者是CLI环境,前者是GUI日志查看工具.在应用里面搜索Console即可找到,里面的界面和Windows的日 ...