setInterval()和setTimeout()的区别

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>

以上代码同样实现了循环功能,那就是将setTimeout()函数放在addNumber()函数内部然后再调用addNumber()函数。
再来看使用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>

段代码实例的功能看上去是一模一样的,其实有这很大的区别的,尤其是当addNumber()执行时间越长差距就表现的越明显。
原因如下:
1.setTimeout()函数执行循环的方式:当addNumber()函数执行到末尾,可以说已经执行完毕的情况下再开始下一个循环执行,每一次循环的执行都是单独执行的。如果说addNumber()函数执行需要2秒的话,那么每两次addNumber()函数执行的时间间隔是2+1=3秒。
2.setInterval()函数执行循环的方式:setInterval()函数是每间隔指定的时间就去执行一次addNumber()函数,也就是说无论addNumber()函数是否执行完毕,只要到了指定的时间间隔都会去执行addNumber()函数,也就是说每两次addNumber()函数执行的时间间隔永远是1秒,如果addNumber()函数执行时间超过1秒的话,,就出现多个addNumber()函数在同时执行的情况。

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0427/227.html

时间: 2024-10-04 03:23:32

setInterval()和setTimeout()的区别的相关文章

第46天:setInterval与setTimeout的区别

js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别 说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧! 1.setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必

SetInterval与setTimeout的区别

setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码.区别:window.setTimeout("function",time)://设置一个超时对象,只执行一次,无周期 window.setInterva

setInterval 和 setTimeout 的区别 JS学习笔记2015-6-26(第67天)

setInterval 会间隔一定时间反复执行某操作: 而setTimeout则会间隔一段时间后只执行一次: 比如: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style

setInterval和setTimeout的区别

setTimeout递归执行的代码必须是上一次执行完了并间格一定时间才再次执行比仿说: setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒. 而不是我们想象的每1秒执行一次. setInterval是排队执行的比仿说: setInterval每次执行时间为1秒,而执行的代码需要2秒执行, 那它还是每次去执行这段代码, 上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒 这样的话在我看来, 如果s

js定时器setInterval() 和setTimeout()的区别

setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的function,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.     不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码:而setTimeout只执行一次那段代码,所以一般setTimeout()一般写在需要定时执行的方法中,递归使用,而setInterval()可以写在<script>的任何位置中,经过时

setInterval 与 setTimeout 的区别

<script> //循环执行,每3秒钟执行一次showalert() window.setInterval(showalert, 3000); function showalert() { alert("aaaaa"); } //定时执行,5秒后执行show(),仅仅执行一次 window.setTimeout(show,5000); function show() { alert("bbb"); } </script>

javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.setInterval与setTimeout定时器的用法与区别.讲得不对的地方,烦请大家指正,还望前辈.大牛多多指教! 二.window对象与document对象的用法和区别 window是全局对象,document是window对象的一个属性它也是一个对象.如图: document对象指的页面这个文档

setInterval和setTimeout区别(验证码倒计时)

写了一个验证码60s倒计时的小demo来帮助记忆和区别setInterval和setTimeout. html <input type="button" id="btn1" value="setInterval获取验证码btn1" onclick="getTime1()" /> <input type="button" id="btn2" value="set

JavaScript定时调用函数(SetInterval与setTimeout)

setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 区别:window.setTimeout("function",time)://设置一个超时对象,只执行一次,无周期 window.setInter