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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
javascript的BOM
May 03 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python迭代器实例简析
2014/09/25 Python
详解python之配置日志的几种方式
2017/05/22 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python表格存取的方法
2018/03/07 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
Python input函数使用实例解析
2019/11/22 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
新年祝酒词大全
2015/08/11 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
教你怎么用python selenium实现自动化测试
2021/05/27 Python