setInterval与setTimeout的区别
在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待多时时间后再开始执行,就像在我们的生活中一样,待会儿再开始做一件事。在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的区别的更多相关文章
- 第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()函数的语法结构: setInterval(code,interval) setInterval()函数可周期性执行一段代码,也就是说代码会被周期性不断的执行下去. 函数具 ...
- setInterval()与setTimeout()的区别
setInterval()-一旦被开启就会不断的执行,使用clearInterval()清除后将不再执行 setTimeout()-又称为一次定时器,定时器开启后只执行一次将不会接着执行,使用clea ...
- setInterval与setTimeout 的区别
setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码 用法: setInterval("alert( ...
随机推荐
- 网易云社区有奖问答活动第二期——技术领导力、深入分布式、PHP圣经、Linux运维、Unity……三月热点图书等你拿!
网易云社区第二期有奖问答活动开始了!(第一期活动已结束:人工智能图书大抽奖!) 欢迎积极参与网易云社区,讨论问题,交流心得.我们本期准备了一批技术领域热点图书,送给参与社区的朋友们,将以抽奖的形式送出 ...
- OSX - 可以安装任何程序!
在shell里面执行命令: sudo spctl --master-disable 参考: https://www.jianshu.com/p/010cc30228f3
- 《Python黑帽子:黑客与渗透测试编程之道》 网络:原始套接字和流量嗅探
Windows和Linux上的包嗅探: #!/usr/bin/python import socket import os #监听的主机 host = "10.10.10.160" ...
- 《Python绝技:运用Python成为顶级黑客》 用Python进行取证调查
1.你曾经去过哪里?——在注册表中分析无线访问热点: 以管理员权限开启cmd,输入如下命令来列出每个网络显示出profile Guid对网络的描述.网络名和网关的MAC地址: reg query &q ...
- Aizu 2249Road Construction 单源最短路变形《挑战程序设计竞赛》模板题
King Mercer is the king of ACM kingdom. There are one capital and some cities in his kingdom. Amazin ...
- 实现一个算法,寻找字符串中出现次数最少的、并且首次出现位置最前的字符 如"cbaacfdeaebb",符合要求的是"f",因为他只出现了一次(次数最少)。并且比其他只出现一次的字符(如"d")首次出现的位置最靠前。
实现一个算法,寻找字符串中出现次数最少的.并且首次出现位置最前的字符如"cbaacfdeaebb",符合要求的是"f",因为他只出现了一次(次数最少).并且比其 ...
- SELECT 三级联动 [转]
<!DOCTYPE html> <html> <head> <meta charset=gbk /> <title>selectList&l ...
- Web端测试和移动端测试
之前参加的项目有涉及Web端测试和移动端测试,简单的记录下他们之间的区别: 1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来 ...
- C# 程序运行中的流程控制
1.C#之流程控制语句:计算机程序执行的控制流程由三种基本的控制结构控制,即顺序结构,选择结构,循环结构. 1) 顺序结构:从上到下,按照书写顺序执行每一条语句,不会发生跳跃. 代码段1; // 先执 ...
- (转)更换镜像rootvg卷组中的硬盘
F85系统镜像盘更换实录之一:删除原有镜像操作 # cfgmgr # lsdev -Cc disk hdisk0 Available 11-09-00-8,0 16 Bit LVD SCSI Dis ...