在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待多时时间后再开始执行,就像在我们的生活中一样,待会儿再开始做一件事。在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. c#位运算小例子笔记

    关于位运算,网上有挺多好的博客介绍过,我就不多解释了 这里只记录一个小例子,是在理解位运算时候写的,帮助自己加深一下印象,做个笔记mark一下 具体场景 摇骰子游戏 1每个骰子有6个点,1-3为小,4 ...

  2. 解决win10不显示coreldraw x4/5/6菜单栏

    1.下载插件 https://pan.baidu.com/s/1nQ1kgUNSD7-9sjUbv5M6XA 复制链接下载插件 2.导入插件到工作区 3.设置工具栏显示 4.把工具栏拖动到菜单栏位置, ...

  3. java简单的邮件发送

    java实现简单的邮件发送案例,学会了这个你就可以利用这个来整你的好友了,不断地给他进行邮箱轰炸(当然个人不建议瞎搞),最重要的是明白其中的原理最好了.话不多说,直接看代码案例了.首先需要导入的jar ...

  4. SSM集成Easyui框架及多模块开发的认识

    首先我们需要建立好一个emaven项目,并且在pom.xml中导入响应的jar包, <?xml version="1.0" encoding="UTF-8" ...

  5. IntelliJ IDEA配置maven3.3.3+mybatis3.1.1

    注:本文参考了孤傲苍狼关于MyBatis学习总结,在此表示感谢,原文链接为http://www.cnblogs.com/xdp-gacl/p/4261895.html. 1.新建project,勾选c ...

  6. elasticsearch Geo Distance Query

    Geo Distance Query 过滤器文档只包括在一个特定距离内存在于一个地理点上的命中.假设下列映射和索引文档: PUT /my_locations { "mappings" ...

  7. elasticsearch索引路径规则

    Path to data on disk In prior versions of Elasticsearch, the path.data directory included a folder f ...

  8. python学习笔记05-列表

    Python3已经不区分整型和长整型 列表: 查  用切片查  [n:n:n] A[1:2]  只能取出一个数  顾头不顾尾 存在步长  可以按步长1取  也可以按设置其他步长取 若要逆序取数  步长 ...

  9. python3中文件操作及编码

    #之前一直没明白文件处理中的w和wb的区别到底是什么,#在看过视频后才知道,原来在linux里面是没有区别的,#但是在windows里面就能够看出区别来了#下面来个例子: with open(&quo ...

  10. 一元运算符 +,可用于将变量转换为数字;如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字)

    一元运算符,可用于将变量转换为数字: var y = "5"; var x = + y; console.log(typeof y);//string 类型 console.log ...