JS中setInterval和setTimeout的区别
来源:互联网 发布:怎么下载网络倾听者app 编辑:程序博客网 时间:2024/05/22 10:22
萌新首发~~记录自己的学习心得,希望高手指出不足的地方
首先免不了先看两者的基本定义与用法:
1.setInterval的基本语法:
setInterval(code,millisec[,"lang"])
2.setTimeout的基本语法:
setTimeout(code,millisec)
乍一看,感觉这两个区别可大了去了。最主要的就是功能不同:setInterval实现的是根据给定的时间间隔,每隔一段时间调用一次函数或执行一次代码。而setTimeout实现的是根据给定的时间,在经过该时间之后只调用一次函数或执行一次代码。那么有什么必要要区分这两个方法呢?举一个例子来感受一下实际应用中两者有多么的相似。
【例子】浏览器实现钟表功能(每一毫秒更新一次显示的数值)
(1)利用setInterval实现
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> 计时器 </title> <script type="text/javascript"> function clock(){ var time=new Date(); time=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+":"+time.getMilliseconds(); document.getElementById("clock").value=time; } setInterval(clock,1); </script></head><body><div align="center"> <input type="textarea" id="clock"/></div></body></html>
(2)利用setTimeout实现:
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> 计时器 </title> <script type="text/javascript"> function clock(){ var time=new Date(); time=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+":"+time.getMilliseconds(); document.getElementById("clock").value=time; setTimeout(clock,1); } setTimeout(clock,1); </script></head><body><div align="center"> <input type="textarea" id="clock"/></div></body></html>※在本例中,我们甚至可以把第二个setTimeout用setInterval替换。
※一般而言,如果当前使用方法所属对象是当前宿主顶级对象window,则可以直接写方法,而不用写宿主。如本例也可以写成window.setTimeout()。
两者实现的效果都一致,如下图所示:
虽然前面我们认为两者差别特别大,但在本例的题设条件下,似乎两者都能解决问题。所以,是不是大家会对在具体情况中这两者到底有什么区别产生了疑问呢?以下是笔者站在巨人的肩膀上之后得到的结论:
setTimeout代码执行条件是等待上一条代码执行结束并等待你设定好的时间之后再执行
setInterval不会等待上一条代码执行结束,而是完全按照你设定的时间间隔执行
所以当你需要对间隔时间精确地控制时,采用setInterval会更合适。另外也没有什么太大的差别,都可以用。
0 0
- JS中setTimeout 和 setInterval 的区别
- JS 中SetInterval和SetTimeout的区别
- JS中setInterval和setTimeout的区别
- JS中window.setInterval和window.setTimeout的区别
- JS中setTimeout()和setInterval()方法的区别
- js中setTimeout与setInterval的区别
- js中setTimeout与setInterval的区别
- JS中的setTimeout和setInterval的区别
- JS常识:setTimeout和setInterval 的区别
- JS中的setTimeout和setInterval的区别
- js 中 setInterval 和 setTimeout 的用法
- js中setTimeout和setInterval的使用
- JS中setInterval和setTimeout的用法
- js setTimeout和setInterval区别
- javascript中setTimeout 和setInterval的区别
- javascript中setTimeOut 和setInterval的区别
- javascript中setTimeout 和setInterval的区别
- javascript中setTimeout 和 setInterval 的区别
- unsigned和signed、const和define的区别
- java将数据库结果集封装成Map, java获取数据库字段
- Mysql5.7 的一些特点
- shell-test、[]用法
- [李景山php] 深入理解PHP内核[读书笔记]--第四章:函数的实现 --简介
- JS中setInterval和setTimeout的区别
- 数值的整数次方
- VR规格表出来啦!Rift,Vive,PSVR,Acer和HP
- Eclipse下创建Maven项目 SSM框架整合(第一篇技术博客)
- VS工程下的tlb, tlh, tli文件说明(COM)
- Apple本地认证(密码+Touch_id)
- ifndef/define/endif的作用
- Android 获取debug和release的 sha1和md5
- centos 常用命令