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. OSG与Shader的结合使用

    目录 1. 概述 2. 固定管线着色 3. 纹理着色 4. 参考 1. 概述 以往在OpenGL中学习渲染管线的时候,是依次按照申请数据.传送缓冲区.顶点着色器.片元着色器这几个步骤编程的.OSG是O ...

  2. Oracle笔记_基础

    1 登录启动 sqlplus / as sysdba #以管理员方式登录 sqlplus 用户名/密码 #本地登录 sqlplus 用户名/密码@//主机IP/实例名(默认orcl) #远程登录 sq ...

  3. unityshader(属性)

    _Color("Color",Color)=(1,1,1,1)//RGBA _Vector("vector",Vector)=(1,2,3,4) //,fixe ...

  4. 从零开始搭建Java开发环境第四篇：精选IDEA中十大提高开发效率的插件！

    Lombok 知名的插件,无需再写那么多冗余的get/set代码 JRebel 热部署插件 alibaba java coding guide 阿里巴巴代码规范插件,自动检查代码规范问题 [在这里插入 ...

  5. Java多线程的中断原理和 interrupt() 几个方法简介

    上节讲到,线程被 wait() 通知后进入等待池,可以由本线程的 interrupt() 方法解救,使本线程可以去重新竞争锁等等.是如何实现的呢? 实际上,中断仅仅是在线程对象做一个标记而已,称为中断 ...

  6. CodeForces 464 B Restore Cube

    Restore Cube 题解: x->yyy 其实就是把x代替成yyy这个值. 如果不好理解的话, 可以试想一下, 刚开始的话 0->0, 1->1, 2->2,...,9- ...

  7. hud 3555 Bomb 数位dp

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) Total Subm ...

  8. Photon Server 服务端编程

    Photon Server 和 Unity3D 数据交互: Photon Server 服务端编程 Unity3D 客户端编程 VS2017 之 MYSQL实体数据模 一:Photon Server的 ...

  9. JSQL查询

    JSQL 其特征与原生soL语句类似,并且完全面向对象,通过类名和属性访问,而不是表名和表的属性. sql:查询的是表和表中的字段 jpql:查询的是实体类和类中的属性 查询全部   >> ...

  10. HTML图片死活不显示

    图片不显示: 1.路径 2.名称 3.少写了" ... " 正确的例子:“../images/dd.png” 4.多写了一个“/” ,或者少写了一个“ . ” ,没错.不是三个点, ...