setInterval()和setTimeout()的区别
一.setInterval()函数的语法结构:
setInterval(code,interval)
setInterval()函数可周期性执行一段代码，也就是说代码会被周期性不断的执行下去。
函数具有两个参数:
第一个参数:规定周期性执行的代码，并不一定非要是一个函数。
第二个参数:规定周期的时间跨度，单位是毫秒，一秒等于1000毫秒。
二.setTimeout()函数的语法结构:
setTimeout(code,interval)
etTimeout()函数可以在指定的事件之后执行一段代码，此代码只会被执行一次。
函数具有两个参数:
第一个参数:规定要被执行的代码，并不一定非要是一个函数。
第二个参数:规定在多长时间之后执行代码，单位是毫秒，一秒等于1000毫秒。
对以上总结如下:
1.相同点:语法结构相同，都有定时器功能。
2.不同点:执行次数不同，setInterval()函数会无限期执行下去，而setTimeout()函数只会执行一次。
三.扩展阅读:
setTimeout()函数也可以实现循环功能，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
div
{
width:200px;
height:50px;
margin:0px auto;
background-color:green;
text-align:center;
line-height:50px;
color:red;
}
</style>
<script type="text/javascript">
window.onload=function b()
{
var a=0
function addNumber()
{
a=a+1;
document.getElementById("num").innerHTML=a;
setTimeout(addNumber,1000);
}
addNumber();
}
</script>
</head>
<body>
<div id="num"></div>
</body>
</html>
再来看使用setInterval()实现上述功能的代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
div
{
width:200px;
height:50px;
margin:0px auto;
background-color:green;
text-align:center;
line-height:50px;
color:red;
}
</style>
<script type="text/javascript">
window.onload=function b()
{
var a=0
function addNumber()
{
a=a+1;
document.getElementById("num").innerHTML=a;
}
setInterval(addNumber,1000);
}
</script>
</head>
<body>
<div id="num"></div>
</body>
</html>
原因如下:
1.setTimeout() 函数执行循环的方式:当addNumber()函数执行到末尾，可以说已经执行完毕的情况下再开始下一个循环执行，每一次循环的执行都是单独执行的。如果 说addNumber()函数执行需要2秒的话，那么每两次addNumber()函数执行的时间间隔是2+1=3秒。
2.setInterval() 函数执行循环的方式:setInterval()函数是每间隔指定的时间就去执行一次addNumber()函数，也就是说无论addNumber()函 数是否执行完毕，只要到了指定的时间间隔都会去执行addNumber()函数，也就是说每两次addNumber()函数执行的时间间隔永远是1秒，如 果addNumber()函数执行时间超过1秒的话，,就出现多个addNumber()函数在同时执行的情况。
setInterval()和setTimeout()的区别的更多相关文章
- setInterval与setTimeout的区别
在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待多时时间后再开始执行,就像在我们的生活中一样,待会儿再开始做一件事.在JavaScript中主要通过定时器实现此类需求,本文将对定时器做一个概 ...
- 第46天：setInterval与setTimeout的区别
js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别 说道setTi ...
- val();html();.text()区别 setInterval与setTimeout的区别
val();html();.text()区别 对于innerHTML 属性,几乎所有的元素都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML.(获取HTM ...
- setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法
setInterval()和setTimeout()方法都是js原生的定时方法,当然它们两个的作用也是不同的,并且最近在做上下滚动公告栏的时候,发现了setInterval()非常令人抓狂的问题,那就 ...
- JS中setInterval与setTimeout的区别
JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...
- 【JavaScript】setinterval和setTimeout的区别
计时器setTimeout()与setInterval()是原生JS很重要且用处很多的两个方法, 但很多人一直误以为是相同的功能: 间隔时间重复执行传入的句柄函数. 但实际上, 并非如此, 既然JS给 ...
- setInterval和setTimeout的区别
setInterval会每隔指定的毫秒数后反复执行指定代码. setTimeout只会在指定的毫秒数后执行一次指定代码. setInterval的用法: // 创建(创建后即开始计时) var int ...
- setInterval()与setTimeout()的区别
setInterval()-一旦被开启就会不断的执行,使用clearInterval()清除后将不再执行 setTimeout()-又称为一次定时器,定时器开启后只执行一次将不会接着执行,使用clea ...
- setInterval与setTimeout 的区别
setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码 用法: setInterval("alert( ...
随机推荐
- Python3字典中items()和python2.x中iteritems()有什么区别
在Python2.x中,items( )用于 返回一个字典的拷贝列表[Returns a copy of the list of all items (key/value pairs) in D],占 ...
- Java Language and Virtual Machine Specifications
The Java Language Specification, Java SE 8 Edition HTML | PDF The Java Virtual Machine Specification ...
- 代码里面执行bat
public static void executeBat(String path) { try { File file = new File(path); ...
- $.browser.msie 报错 null
jQuery 1.9 移除了 $.browser 的替代方法 January 16th, 2013FwolfLeave a commentGo to comments 授权方式:署名,非商业用途,保持 ...
- shell脚本实例-系统监控
shell脚本监控网站并实现邮件.短信报警shell进程监控脚本(发送邮件报警)Shell脚本监控服务器在线状态和邮件报警的方法 http://www.jbxue.com/jb/shell/ 11. ...
- OpenJudge计算概论-文字排版
/*====================================================================== 文字排版 总时间限制: 1000ms 内存限制: 65 ...
- 设置页面不缓存 no-cache
html中设置方法 <head> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <M ...
- 3 TKinter设置宽高及背景色
代码示例 #!/usr/bin/env python # _*_ coding:utf-8 _*_ from Tkinter import * root = Tk() B1 = Button(root ...
- mysql导出查询结果到csv方法
要将MySQL的查询结果导出为csv,一般会使用php连接mysql执行查询,将返回的查询结果使用php生成csv格式再导出. 但这样比较麻烦,需要服务器安装php才可以实现. 直接使用mysql导出 ...
- asp.net MVC ViewData详解
转自:http://www.cnblogs.com/gaopin/archive/2012/11/13/2767515.html 控制器向视图中传值ViewData详解 1.将一个字符串传值到视图中 ...