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 相关文章推荐
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php MySQL与分页效率
2008/06/04 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
javascript 播放器 控制
2007/01/22 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
JS实现简单日历特效
2020/01/03 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
有趣的python小程序分享
2017/12/05 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
python中round函数如何使用
2020/06/19 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
技术总监岗位职责
2013/12/05 职场文书
绿色城市实施方案
2014/03/19 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫