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 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php中explode与split的区别介绍
2012/10/03 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
js压缩利器
2007/02/20 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
webpack4简单入门实例
2018/09/06 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
浅谈Python 中整型对象的存储问题
2016/05/16 Python
django允许外部访问的实例讲解
2018/05/14 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
合作意向书范本
2014/03/31 职场文书
百日安全活动总结
2014/05/04 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
单位车辆管理制度
2015/08/05 职场文书
个人工作决心书
2015/09/22 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers