setTimeout（）  可以理解为 定时炸弹      ---------------->隔一段事件执行，并且只会执行一次

函数语法：

setTimeout（参数1，参数2）

参数1：待执行的函数，可以在方法里面写匿名函数，也可以在外面写好函数，这里直接传入函数名

参数2：执行函数触发到执行的时间间隔，单位是毫秒   1s=1000ms

返回值：整形数据，用来标识定时器。页面中很多个定时器，每个定时器都有自己的标识符

清除定时器的方法：

clearTimeout(参数3)

参数3：定时器的标识符

详细代码如下：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>setTimeout</title>

     </head>

     <body>

         <!-- 两个按钮，一个“开始”，一个“取消” -->

         <input type="button" id="btnStart" value="开始" />

         <input type="button" id="btnEnd" value="取消" />

         <!-- 插入JS -->

         <script>

             var timeId;//存放定时器的标识

             // 给"开始"按钮注册点击事件,在事件中插入一个定时器

             var btnStart=document.getElementById('btnStart');

             btnStart.onclick=function(){

                 //setTimeout(参数1，参数2)

                 //参数1:要执行的函数,可以是匿名函数,也可以是已经定义好的函数

                 //参数2:待执行函数的执行间隔,单位是毫秒  1s=1000ms

                 //返回值:是一个整数,用以标识定时器,以后要关闭该定时器,就是通过该标识符找到该定时器

 //                 setTimeout(function(){

 //                     console.log('要爆炸了');

 //                 },2000);

                 //定时器要执行的函数

                 function fn(){

                     console.log('要爆炸了');

                 }

                 timeId=setTimeout(fn,2000);

             }

             // 给"取消"按钮注册点击事件,在事件中取消定时器

             var btnEnd=document.getElementById('btnEnd');

             btnEnd.onclick=function(){

                 //通过定时器标识符取消定时器

                 clearTimeout(timeId);

             }

         </script>

     </body>

 </html>

javascript--setTimeout定时器的更多相关文章

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

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

  2. JavaScript中定时器的暂停和继续

    对于JavaScript的定时器来说没有严格意义上的暂停和重启,只有清除停止,但是可以通过一些‘障眼法’实现 allChild[index].onclick = function(){//当点击目标且 ...

  3. JavaScript的定时器是如何工作的

    理解JavaScript定时器工作原理对于学习JavaScript非常重要.因为JavaScript是单线程运行的,定时器使用场合少,不是很直观.下面通过三个函数来学习JavaScript如何定义,操 ...

  4. day27—JavaScript实现定时器及其应用案例

    转行学开发,代码100天——2018-04-12 JavaScript中定时器有两种,分别是setInterval和setTimeout;其用法如下: 开启: setTimeout("fun ...

  5. Javascript中定时器的使用方法

    Javascript中定时器的使用方法 1.间隔定时器(每隔一段时间执行一次代码) 格式:setInterval(函数,时间) //时间单位是毫秒,每隔设置的时间执行函数里的内容一遍(一直执行) // ...

  6. js 详解setTimeout定时器

    setTimeout: 定时器函数 第一个参数是匿名函数,第二个参数是延迟执行时间 setTimeout(function(){},time) 注意: 1.setTimeout函数是Window对象提 ...

  7. Javascript 的定时器 setInterval,setTimeout,clearInterval

    今天开通博客.来1个.哇哈哈哈~~ 今天本来想复习BOM的看到定时器也算DOM一种 ?(是这样吗).分享一下 参考源于:八神吻你 http://www.cnblogs.com/lmfeng/archi ...

  8. JavaScript中定时器

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务. setTimeout() ...

  9. 理解JavaScript的定时器与回调机制

    定时器方法 JavaScript是单线程的.虽然HTML5已经开始支持异步js了. JavaScript的setTimeout与setInterval看起来就像已经是多线程的了.但实际上setTime ...

  10. setInterval && setTimeout || 定时器

    来自w3school的解释 定时器setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterva ...

随机推荐

  1. css随堂笔记（三）

    Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 ...

  2. easyui datebox 精确到秒并且显示值

    其实这个官网文档有的,也就不啰嗦了,直接贴官网的代码吧. <input id="dt" type="text" name="birthday&q ...

  3. js数组的sort排序的原理和应用

    1.js sort()方法的应用: 首先:如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序.要实现这一点,首先应把数组的元素都转换成字符串( ...

  4. Weka:call for the EM algorithm to achieve clustering.（EM算法）

    EM算法: 在Eclipse中写出读取文件的代码然后调用EM算法计算输出结果: package EMAlg; import java.io.*; import weka.core.*; import ...

  5. IOS APP 瘦身

    只保留其中一宗编译环境包 lipo -thin armv7 XXAPP -output XXAPP.armv7

  6. MySQL中AddDate函数的疑惑

    无论使用哪一种RDBMS,都需要使用到其中的一些日期转换函数,在使用MySQL的AddDate函数时,遇到了点小问题,稍作记录. root@localhost:mysql3376.sock [(non ...

  7. MFC 鼠标事件

    1. 新建项目 项目名称:MFCBaseMessage 2. 选择基本对话框模式,如图 ,点击完成3. 最终如图 4.右键添加类向导   5.添加鼠标事件 6.在ON_LButtonDown添加如下代 ...

  8. oozie 完整流程实例

    Oozie概述: Oozie是一个基于Hadoop工作流引擎,也可以称为调度器,它以xml的形式写调度流程,可以调度mr,pig,hive,shell,jar,spark等等.在实际工作中,遇到对数据 ...

  9. 欢迎来到“火龙族智者”的blog

    本blog里有每天更新的比赛感想,新技术体会以及日语学习相关事宜. 主要研究方向是算法,信息安全以及日语. 希望各位能常来看看.

  10. 初次接触《C++程序设计原理与实践》一书

    前两天读书日,买了些书回来看.__Bjarne Stroustrup__的<C++程序设计原理与实践>便是其中一本.其实也没看完,只看了第0章-致读者,大师不愧是大师,只看了一章就让心生共 ...