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. CSS3开启硬件加速

    { transform: translateZ(0); transform: translate3d(0,0,0);}<!-- transform: translateZ(0); transfo ...

  2. Docker资源管理

    一台宿主机可以放多个容器,默认的情况下,Docker 没有对容器进行硬件资源的限制,当容器负载过高时会尽可能的占用宿主机资源,所以有时候我们需要对容器的资源使用设置一个上限,今天我们就来看看如何管理 ...

  3. Git 上传本地项目到Github

    前提: 安装Git 注册并拥有Github账号 目录: 初始化本地目录位Git仓库 Github上创建仓库 本地生成SSH key,并添加到Github上 本地项目管理Github上远程项目 详细步骤 ...

  4. matplotlib绘制矢量图像(svg),pdf and ps文件

    机器学习的过程中处理数据,会遇到数据可视化的问题． 大部分都是利用python的matplotlib库进行数据的可视化处理． plt.show() 默认都是输出.png文件,图片只要稍微放大一点,就糊 ...

  5. hdu 4612 无向图连通分量缩点，然后求树的最大直径

    #pragma comment(linker,"/STACK:102400000,102400000") #include <iostream> #include &l ...

  6. CF 13E Holes

    Holes 题意:现在有一排洞,每个洞有一个弹力,能弹到ai之后的洞,球会弹到这个排的外面,现在有2个操作,0 a b 将第a个洞的弹力设为b, 1 a 将球放入第a个洞,求输出进洞的次数 和 弹出这 ...

  7. CF990C Bracket Sequences Concatenation Problem 思维 第五道 括号经典处理题目

     Bracket Sequences Concatenation Problem time limit per test 2 seconds memory limit per test 256 meg ...

  8. bzoj3032 七夕祭题解

    题面 TYVJ七夕祭和11区的夏祭的形式很像.矩形的祭典会场由N排M列共计N×M个摊点组成.虽然摊点种类繁多,不过cl只对其中的一部分摊点感兴趣,比如章鱼烧.苹果糖.棉花糖.射的屋--什么的.Vani ...

  9. 模板类型推导、auto推导

    effective modern c++ 果然是神书,干货满满,简单记录下. item1 模板推倒 典型的模板函数 temlate<class T> void fn(ParamType p ...

  10. Elasticsearch 顶尖高手(1)

    1.什么是搜索? 百度 = 搜索,这是不对的 垂直搜索(站内搜索) 互联网的搜索:电商网站,招聘网站,新闻网站,各种app IT系统的搜索:OA软件,办公自动化软件,会议管理,项目管理,员工管理 搜索 ...