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( ...
随机推荐
- apache性能优化
perfork进程数 http://sookk8.blog.51cto.com/455855/275759/ mod_cache 磁盘缓存 http://www.cnblogs.com/fnng/ar ...
- 【转】iOS开发拓展篇—静态库
原文网址:http://www.cnblogs.com/wendingding/p/3893095.html iOS开发拓展篇-静态库 一.简单介绍 1.什么是库? 库是程序代码的集合,是共享程序代码 ...
- 时事新闻之 谷歌 google 发布Tensor Flow 源代码
TensorFlow: TensorFlow is an open source software library for numerical computation using data flow ...
- ps颜色相加
一. 红+绿=黄 红+蓝=品红 绿+蓝=青 白色:红+绿+蓝=白色.(黄.品红.青,两种以上颜色相加是白色) 互补色:红->青.绿->品红.蓝->黄 二. 品红+黄=红 青+黄=绿 ...
- Softmax回归（使用theano）
# coding:utf8 import numpy as np import cPickle import theano import os import theano.tensor as T cl ...
- linux包之nc之nc命令
nc-1.84-22.el6.x86_64不用系统上提供的nc版本会有所不同,其提供的参数使用方法也略有差异 nc -v -w 1 192.168.2.10 -z 1-65535|grep succe ...
- unity, 同步物体坐标一定要在LateUpdate中进行
设a为主动物体,b为跟随物体. 如果a,b都在同一个Update里更新坐标,那么两者自然是同步的. 如果a在a.Update里更新位置,而b在b.Update里将自己的位置更新为与a相同,那就会有误差 ...
- dubbo Linux 解决：nc: command not found
出现该情况有两种可能: (1)没有配置nc命令的环境变量: (2)该系统没有安装nc命令: 我查看了一下在/usr/bin目录中并没有nc命令,所以我可以认为出现该情况的原因是第二种情况 下载安装 下 ...
- JABX简单介绍
主要引至http://suo.iteye.com/blog/1233458 一.简介 1.概念是什么:(Java Architecture for XML Binding) 是一个业界的标准,是一项可 ...
- MIT牛人解说数学体系（转载）
原文网址:http://www.guokr.com/post/442622/ 在过去的一年中,我一直在数学的海洋中游荡,research进展不多,对于数学世界的阅历算是有了一些长进. 为什么要深入数学 ...