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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
深入浅出了解Node.js Streams
May 27 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/10 PHP
linux iconv方法的使用
2011/10/01 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP7 list() 函数修改
2021/03/09 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
Js apply方法详解
2017/02/16 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
MySQL适配器PyMySQL详解
2017/09/20 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
项目经理岗位职责
2013/11/11 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
房地产开发项目建议书
2014/05/16 职场文书
主题班会开场白
2015/06/01 职场文书
什么是SOLID
2022/03/24 Javascript
MySQL深分页问题解决思路
2022/12/24 MySQL