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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
JavaScript编码小技巧分享
Sep 17 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/04/17 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
校园活动策划书范文
2014/01/10 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
总经理岗位职责
2015/02/04 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python