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 form表单提交插件asp.net后台中文解码
Jun 12 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 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中,文件上传
2006/12/06 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Python编程之属性和方法实例详解
2015/05/19 Python
python 基础教程之Map使用方法
2017/01/17 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
10个示例带你掌握python中的元组
2020/11/23 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
十八大闭幕感言
2014/01/22 职场文书
财产公证书格式
2014/04/10 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书