setInterval()和setTimeout()的用法和区别示例介绍


Posted in Javascript onNovember 17, 2013

1. setInterval() 用法_学习

//每隔一秒自动执行方法 
var c=0; 
function showLogin() 
{ 
alert(c++); 
} 
//setInterval方法或字符串 ,毫秒,参数数组(方法的)) 
setInterval("showLogin()","1000");

2.setTimeout

setTimeout()在js类中的使用方法
setTimeout (表达式,延时时间)
setTimeout(表达式,交互时间)
延时时间/交互时间是以豪秒为单位的(1000ms=1s)setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式
1,基本用法:
执行一段代码:
var i=0;
setTimeout("i+=1;alert(i)",1000);
执行一个函数:
var i=0;
setTimeout(function(){i+=1;alert(i);},1000);

//注意比较上面的两种方法的不同。
下面再来一个执行函数的:

var i=0; 
function test(){ 
i+=1; 
alert(i); 
} 
setTimeout("test()",1000);

也可以这样:
setTimeout(test,1000);
总结:
setTimeout的原型是这样的:
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

setTimeout有两种形式
setTimeout(code,interval)
setTimeout(func,interval,args)
其中code是一个字符串
func是一个函数.
注意"函数"的意义,是一个表达式,而不是一个语句.
比如你想周期性执行一个函数
function a(){
//...
}
可写为
setTimeout("a()",1000)

setTimeout(a,1000)
这里注意第二种形式中,是a,不要写成a(),切记!!!
展开来说,不管你这里写的是什么,如果是一个变量,一定是一个指向某函数的变量;如果是个函数,那它的返回值就 要是个函数
2,用setTimeout实现setInterval的功能(每隔一段时间自动执行函数)
思路很简单,就是在一个函数中调用不停执行自己,有点像递归

var i=0; 
function xilou(){ 
i+=1; 
if(i>10){alert(i);return;} 
setTimeout("xilou()",1000); 
//用这个也可以 
//setTimeout(xilou,1000); 
}

3,在类中使用setTimeout
终于到正题了,其实在类中使用大家遇到的问题都是关于this的,只要解决了这个this的问题就万事无忧了。
呵呵。让我们来分析一下:
function xilou(){ 
this.name="xilou"; 
this.sex="男"; 
this.num=0; 
} 
xilou.prototype.count=function(){ 
this.num+=1; 
alert(this.num); 
if(this.num>10){return;} 
//下面用四种方法测试,一个一个轮流测试。 
setTimeout("this.count()",1000);//A:当下面的x.count()调用时会发生错误:对象不支持此属性或方法。 
setTimeout("count()",1000);//B:错误显示:缺少对象 
setTimeout(count,1000);//C:错误显示:'count'未定义 
//下面是第四种 
var self=this; 
setTimeout(function(){self.count();},1000);//D:正确 } 
var x=new xilou(); 
x.count();

错误分析:
A:中的this其实指是window对象,并不是指当前实例对象
B:和C:中的count()和count其实指的是单独的一个名为count()的函数,但也可以是window.count(),因为window.count()可以省略为count()
D:将变量self指向当前实例对象,这样js解析引擎就不会混肴this指的是谁了。

话说回来,虽然我们知道setTimeout("this.count()",1000)中的this指的是window对象,但还是不明白为什么会是
window对象^_^(有点头晕...)
那我们可以想象一下这个setTimeout是怎样被定义的:
setTimeout是window的一个方法,全称是这样的:window.setTimeout()
那应该是这样被定义的:
window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
//.....代码
return timer//返回一个标记符
}
所以当向setTimeout()传入this的时候,当然指的是它所属的当前对象window了。

简单实例:

<!DOCTYPE html> 
<html> <body> 
<h1 id="id1">My Heading 1</h1> 
<button type="button" id="click" onClick="change()"> 
点击这里!</button> 
</body> 
<script> 
var i=1; 
function clickButton(){ 
document.getElementById("click").click(); 
i++; 
} 
setInterval("clickButton()","1000"); 
//setTimeout("clickButton()",1000); 
//setTimeout(clickButton,1000); 
function change(){ 
if(i%2==1) 
document.getElementById('id1').style.color='red'; 
else 
document.getElementById('id1').style.color='black'; 
} 
</script> 
</html>
Javascript 相关文章推荐
JQuery 文本框使用小结
May 22 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 #Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 #Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 #Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 #Javascript
jquery+json实现数据列表分页示例代码
Nov 15 #Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 #Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 #Javascript
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php入门教程 精简版
2009/12/13 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python获取豆瓣电影简介代码分享
2014/01/16 Python
python中set()函数简介及实例解析
2018/01/09 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
如何理解transaction事务的概念
2015/05/27 面试题
毕业自我鉴定范文
2013/11/06 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
装修设计师求职信
2014/02/26 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
员工离职通知函
2015/04/25 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS