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 miscellanea -display data real time, using window.status
Jan 09 Javascript
FLASH 广告之外的链接
Dec 16 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
vue组件从开发到发布的实现步骤
Nov 11 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正则表达式使用的详细介绍
2013/04/27 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
php实现的双向队列类实例
2014/09/24 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 提取文件的小程序
2009/07/29 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python中解析json格式文件的方法示例
2017/05/03 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
家长对孩子的寄语
2015/02/26 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
python实现批量移动文件
2021/04/05 Python
JS ES6异步解决方案
2021/04/29 Javascript