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 技巧大全(新手入门篇)
May 12 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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动态生成版权所有信息的方法
2015/03/24 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
python 深度学习中的4种激活函数
2020/09/18 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
最新计算机专业自荐信
2013/10/16 职场文书
人力资源专业推荐信
2013/11/29 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
计划生育诚信协议书
2014/11/02 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers