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. Flink的Job启动JobManager端(源码分析)

    通过前面的文章了解到 Driver将用户代码转换成streamGraph再转换成Jobgraph后向Jobmanager端提交 JobManager启动以后会在Dispatcher.java起来RPC ...

  2. Go语言学习——如何实现一个过滤器

    1.过滤器使用场景 做业务的时候我们经常要使用过滤器或者拦截器(听这口音就是从Java过来的).常见的场景如一个HTTP请求,需要经过鉴权过滤器.白名单校验过滤.参数验证过滤器等重重关卡最终拿到数据. ...

  3. Codeforces 337D

    题意略. 思路: 本题着重考察树的直径.如果我们将这些标记点相连,将会得到大树中的一个子树.我之前只知道树内的点到直径上两端点的距离是最远的,其实,在 整个大树中,这个性质同样适用,也即大树上任意一点 ...

  4. HDU 5057

    题意略. 开始想开一个三维的树状数组,但是一算空间不够,正解是离线操作,按位来计算,一共是10位,所以总共是扫10遍,第i遍只处理第i位的询问, 注意在修改后,要把当前这个位的值存下来(这就是cur数 ...

  5. Leetcode之深度优先搜索（DFS）专题-547. 朋友圈（Friend Circles）

    Leetcode之深度优先搜索(DFS)专题-547. 朋友圈(Friend Circles) 深度优先搜索的解题详细介绍,点击 班上有 N 名学生.其中有些人是朋友,有些则不是.他们的友谊具有是传递 ...

  6. spring boot application 配置详情

    # =================================================================== # COMMON SPRING BOOT PROPERTIE ...

  7. C#开发学习人工智能的第一步

    前言 作为一个软件开发者,我们除了要学会复制,黏贴,还要学会调用API和优秀的开源类库. 也许,有人说C#做不了人工智能,如果你相信了,那只能说明你的思想还是狭隘的. 做不了人工智能的不是C#这种语言 ...

  8. 【管理学】SMART

  9. yzoj1657货仓选址 题解

    题面: 在一条数轴上有N家商店,它们的坐标分别为 A[1]~A[N].现在需要在数轴上建立一家货仓,每天清晨,从货仓到每家商店都要运送一车商品.为了提高效率,求把货仓建在何处,可以使得货仓到每家商店的 ...

  10. Springboot源码分析之Spring循环依赖揭秘

    摘要: 若你是一个有经验的程序员,那你在开发中必然碰到过这种现象:事务不生效.或许刚说到这,有的小伙伴就会大惊失色了.Spring不是解决了循环依赖问题吗,它是怎么又会发生循环依赖的呢?,接下来就让我 ...