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 相关文章推荐
Javascript 面向对象 重载
May 13 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
Angular2自定义分页组件
Apr 19 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 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 创建标签云函数代码
2010/05/26 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
Python的Flask框架与数据库连接的教程
2015/04/20 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
Django URL参数Template反向解析
2020/11/24 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
职业教育毕业生求职信
2013/11/09 职场文书
体育课外活动总结
2014/07/08 职场文书
初中重阳节活动总结
2015/05/05 职场文书
2016年会开场白台词
2015/06/01 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis