在制作网页动态效果时，一定会遇到某些需求，要求某段程序等待多时时间后再开始执行，就像在我们的生活中一样，待会儿再开始做一件事。在JavaScript中主要通过定时器实现此类需求，本文将对定时器做一个概括，正对setTimeout()做一个详细用法总结。

一.setInterval与setTimeout的区别

setInterval

setInterval()方法可按照指定的周期来调用函数或者计算表达式（以毫秒为单位）

语法：

setInterval(函数表达式，毫秒数)；

setInterval()会不停的调用函数，直到clearInterval()被调用或者窗口被关闭，由 setInterval()返回的ID值可用作clearInterval()方法的参数。

setTimeout

setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式（以毫秒为单位）

语法：

setTimeout(函数表达式，毫秒数)；

setTimeout()只执行函数一次，如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()

区别

　　通过以上分析可以看出，setTimeout与setInterval的主要区别是:

　　setTimeout()方法只运行一次，也就是说当达到设定的时间后就出发运行指定的代码，运行完后就结束了，如果还想再次执行同样的函数，可以在函数体内再次调用setTimeout()，可以达到循环调用的效果。

　　setInterval()是循环执行的，即每达到指定的时间间隔就执行相应的函数或者表达式，是真正的定时器。

二.setTimeout()的用法

　　先写个最简单的demo，如下：

　　

 
 1 <!DOCTYPE html>

 2  <html lang="en">

 3      <head>

 4            <meta charset="utf-8">

 5            <script>

 6                   setTimeout("alert('hello')",2000);

 7            </script>

 8      </head>

 9     <body>

10     </body>

11 </html>

页面会在停留2秒之后弹出对话框,注意setTimeout不会自动重复执行！

当然，setTimeout也可以执行function，还可以不断重复执行！

你可以看到h1中的文本数字在一秒一秒地递增！

更加灵活的是，你还可以指定重复执行的次数，如下：

if判断中的数字，是用来限制重复执行次数的条件。

三.clearTimeout()

要使用clearTimeout()，需要我们设定setTimeout()时， 给予这setTimeout()一个名称, 这名称就是timeoutID ，我们叫停时，就是用这 timeoutID 来叫停

 
 1  <!DOCTYPE html>

 2   <html lang="en">

 3       <head>

 4             <meta charset="utf-8">

 5             <script>

 6                   var timeId= setTimeout("alert('hello')",2000);

 7                    clearTimeout(timeId);

 8             </script>

 9       </head>

10      <body>

11      </body>

12  </html>
 

原计划1秒后弹出的警示框，被自然叫停了。

setInterval与setTimeout的区别的更多相关文章

  1. 第46天：setInterval与setTimeout的区别

    js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别 说道setTi ...

  2. val();html();.text()区别 setInterval与setTimeout的区别

    val();html();.text()区别   对于innerHTML 属性,几乎所有的元素都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML.(获取HTM ...

  3. setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法

    setInterval()和setTimeout()方法都是js原生的定时方法,当然它们两个的作用也是不同的,并且最近在做上下滚动公告栏的时候,发现了setInterval()非常令人抓狂的问题,那就 ...

  4. JS中setInterval与setTimeout的区别

    JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...

  5. 【JavaScript】setinterval和setTimeout的区别

    计时器setTimeout()与setInterval()是原生JS很重要且用处很多的两个方法, 但很多人一直误以为是相同的功能: 间隔时间重复执行传入的句柄函数. 但实际上, 并非如此, 既然JS给 ...

  6. setInterval和setTimeout的区别

    setInterval会每隔指定的毫秒数后反复执行指定代码. setTimeout只会在指定的毫秒数后执行一次指定代码. setInterval的用法: // 创建(创建后即开始计时) var int ...

  7. setInterval()和setTimeout()的区别

    一.setInterval()函数的语法结构: setInterval(code,interval) setInterval()函数可周期性执行一段代码,也就是说代码会被周期性不断的执行下去. 函数具 ...

  8. setInterval()与setTimeout()的区别

    setInterval()-一旦被开启就会不断的执行,使用clearInterval()清除后将不再执行 setTimeout()-又称为一次定时器,定时器开启后只执行一次将不会接着执行,使用clea ...

  9. setInterval与setTimeout 的区别

    setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码     用法: setInterval("alert( ...

随机推荐

  1. MVC批量上传文件

    初始图片: 选中图片后 ---------------------------------------------------------------------------------- 前端代码 ...

  2. Layui：前后端分离之Form表单

    页面效果图: <div style="display: none;" id="formContainer"> <form class=&quo ...

  3. NLayerAppV3-Infrastructure（基础结构层）的Data部分和Application（应用层）

    回顾:NLayerAppV3是一个使用.net 2.1实现的经典DDD的分层架构的项目. NLayerAppV3是在NLayerAppV2的基础上,使用.net core2.1进行重新构建的:它包含了 ...

  4. leetcode 之突然不做了

    最近心情也不好,学不会的东西太多,以前能懂为什么,现在完全不知道为什么,只能依葫芦画瓢了,所以我写出了的代码到底是会了吗?还是瓢画的好? 热血之三分钟热度小张发现leetcode里会做的好像都做了,剩 ...

  5. neutron openvswitch + vxlan 通讯

  6. const的详解

    1.const的成员变量 常成员变量的值不能被更新,将在构造函数时候进行初始化 2.const的成员函数 常成员函数只能调用常成员函数,常成员函数不能修改任何成员变量的数值 3.const的成员对象 ...

  7. XCode10.0遇到的问题

    1:编译时报info.plist冲突. 解决方法,XCode上 File -> Workspace Settings ... 将Build System改为 Legacy Build Syste ...

  8. http 协议 c++代码 获取网页

    最近接触了些 html 和 JavaScript,索性了解下 http 协议.在园子里找到了 HTTP协议详解,图文并茂,很爽! 于是小小的尝试了下 #include <WinSock2.h&g ...

  9. poj1511

    Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 25099   Accepted: 829 ...

  10. 安装Nginx并为node.js设置反向代理

    最近看了反向代理和正向代理的东西,想到自己的node.js服务器是运行在3333端口的,也没有为他设置反向代理,node.js项目的一些静态文件是完全可以部署在Nginx上,以减少对node.js的请 ...