js中的计时器事件

在js中，通常会有一些事件，我们需要让它 间隔一段时间之后再发生，或者 每隔一段时间 发生一次，那就需要用到我们js中的计时事件

计时事件主要有两种：

  • setTimeout() ---- 间隔一定的时间之后执行
  • setInterval() ----每间隔一定的时间执行一次（重复性执行）

setTimeout()

间隔一定的时间之后`执行指定的语句或函数。

例如：3s后跳转到前一个页面。

<script type="text/javascript">

    setTimeout(function(){

            window.history.back();

    },3000);

</script>

也可以采用调用函数的方式

function fn1(){

			console.log("你好");

		}

		setTimeout(fn1,3000);

需要注意的是，我们在上述代码中调用函数时调用的整个函数体，而不是函数执行后的结果fn1()

setInterval()

每隔一段时间执行一次指定的语句或函数，是个重复性的操作。

实例1：每隔3s打印一次“hello”

<script type="text/javascript">

    setTimeout(function(){

           console.log("hello");

    },3000);

</script>

实例2：显示当前时间，通过按钮实现时间的停止，开始

<body>

    <h4 id="demo"></h4>

    <input type="button" onclick="startTimer()" value="开始">

    <input type="button" onclick="stopTimer()" value="停止">

</body>


<script type="text/javascript">

    var myVar;

    function startTimer(){

        /*setInterval() 间隔指定的毫秒数不停地执行指定的代码*/

        myVar=setInterval(function(){myTimer()},1000);

        }

    function myTimer()/* 定义一个得到本地时间的函数*/

    {

    var d=new Date();

    var t=d.toLocaleTimeString();

    document.getElementById("demo").innerHTML=t;

    }

    function stopTimer()

    {/* clearInterval() 方法用于停止 setInterval() 方法执行的函数代码*/

    clearInterval(myVar);

    }

    </script>

如何执行停止呢？

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码.

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

这里注意myVar必须是一个全局变量。实例如下：

var myVar;

    function myFunction()

    {

    myVar=setTimeout(function(){alert("Hello")},3000);

    }

    function myStopFunction()

    {

    clearTimeout(myVar);

    }

js中的计时器事件`setTimeout()` 和 `setInterval()`的更多相关文章

  1. JS中的计时器事件

    JS可以实现很多java代码不易完成的功能.这里学习一些js中的计时器事件. JavaScript 一个设定的时间间隔之后来执行代码,称之为计时事件. 主要通过两个方法来实现: 1.setInterv ...

  2. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  3. js中的计时器

    在JS中做二级菜单时,被一个鼠标移出时隐藏的小问题困扰了很久. <script> function Menu(id){ var _this=this; this.obj=document. ...

  4. JavaScript 的定时（Timing ）事件——setTimeout()与setInterval()

    JavaScript 可以在时间间隔内执行,这就是所谓的定时事件( Timing Events). ㈠Timing 事件 ⑴window 对象允许以指定的时间间隔执行代码,这些时间间隔称为定时事件. ...

  5. 在js中绑定onclick事件为什么不加括号，在html代码中必须要加？

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 问题解决：在js中绑定onclick事件为什么不加括号，在html代码中必须要加？（转载）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS 中的自定义事件和模拟事件

    在 JS 中模拟事件指的是模拟 JS 中定义的一些事件,例如点击事件,键盘事件等. 自定义事件指的是创建一个自定义的,JS 中之前没有的事件. 接下来分别说一下创建这两种事件的方法. 创建自定义事件 ...

  8. js中获取键盘事件【转】

    <script type="text/javascript" language=JavaScript charset="UTF-8"> 2 docu ...

  9. js中获取键盘事件

    <script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...

随机推荐

  1. Liunx学习总结(四)--文件的权限管理

    文件和目录的权限 每个文件都有其所有者(u:user).所属组(g:group)和其他人(o:other)对它的操作权限,a:all则同时代表这3者.权限包括读(r:read).写(w:write). ...

  2. Django之上传图片，分页，三级联动

    Django1.8.2中文文档:Django1.8.2中文文档 上传图片 配置上传文件保存目录 1)新建上传文件保存目录. 2)配置上传文件保存目录. 后台管理页面上传图片 1)设计模型类. 2)迁移 ...

  3. 【原创】ARMv8 MMU及Linux页表映射

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  4. Oracle - 自治事务autonomous transaction

    自治事务 - autonomous transaction 在Oracle数据库中,有时候我们会希望记录一个过程或者函数的运行日志,不管正常运行结束还是触发异常结束,都要记录. 正常结束的没有问题,但 ...

  5. JDK中的Proxy技术实现AOP功能

    1.需求,用户在执行某个业务方法时我们需要对这个用户进行判断是否具有权限(或者说用户是否登录了)? 例如修改用户信息,我们在update()方法前判断当前用户user是否为null(表示没有权限或者没 ...

  6. [Revit]开始：编写一个简单外部命令

    1 创建项目 以Visual Stidio作为开发工具,测试平台为Revit 2017 打开VS,创建一个C# .NET Framwork类库项目,选择..net框架版本为.NET Framwork ...

  7. poj - 1860 Currency Exchange Bellman-Ford 判断正环

    Currency Exchange POJ - 1860 题意: 有许多货币兑换点,每个兑换点仅支持两种货币的兑换,兑换有相应的汇率和手续费.你有s这个货币 V 个,问是否能通过合理地兑换货币,使得你 ...

  8. CodeForces 416 B Appleman and Tree DP

    Appleman and Tree 题解: 定义dp[u][1] 为以u的子树范围内,u这个点已经和某个黑点相连的方案数. dp[u][0] 为在u的子树范围内, u这个点还未和某个黑点相连的方案数. ...

  9. 题解 bzoj 2151 种树

    题意 传送门 手写堆大法好啊,题解貌似没有结构体堆的做法,思路有些像配对堆,关于配对堆请自行百度,因为本蒟蒻不会.. 以下是蒟蒻的做法:建立一个大根堆a维护最大价值里面存入它的编号以及价值.听说配对堆 ...

  10. 3.python之文件操作

    一.文件操作初识 f = open('文件路径', '编码方式', '操作方式') # 注意里面所有内容,需加引号 ” 打开一个文件需要知道的内容有: 文件路径:c:\文件.txt(绝对路径和相对路径 ...