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. Oracle笔记_多表查询

    1 执行sql文件 @文件地址名 --执行某个sql文件: 2 多表查询 想要的数据不在同一张表,就需要多个表进行联查. 多表查询也叫做表连接查询,其中的where条件就是连接条件. 可以使用join ...

  2. Redis学习总结(三)--Redis持久化

    Redis 是将数据存储在内存中的,如果出现断电或系统故障的时候数据就会存在丢失的现象,Redis通过将数据持久化到硬盘中来避免这个问题的出现,我们今天就来学习下 Redis 持久化. Redis 持 ...

  3. NanoPi NEO2 学习笔记 1：安装系统、首次开机和一些设置

    初识NEO2 前几天搞到了一块NanoPi NEO2,A53的核心,512M内存,一个千兆网口,非常小的体积,质量也不错,非常满意,140元的价格可以买到这样一块ARM开发板也是非常划算了,非常适合低 ...

  4. Windows GIT SSH 免密教程

    Windows GIT SSH 免密教程 安装git客户端,最新下载地址如下 https://github.com/git-for-windows/git/releases/download/v2.2 ...

  5. Python 命令行之旅：使用 argparse 实现 git 命令

    作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  6. .NET Core 学习资料精选：进阶

    .NET 3.0 这个月就要正式发布了,对于前一篇博文<.NET Core 学习资料精选:入门>大家学的可还开心?这是本系列的第二篇文章:进阶篇,喜欢的园友速度学起来啊. 对于还在使用传统 ...

  7. CodeForces 367 C Sereja and the Arrangement of Numbers 欧拉回路

    Sereja and the Arrangement of Numbers 题解: ummm. 在一副图中,如果全部点的度数是偶数/只有2个点是奇数,则能一笔画. 考虑图的点数k为奇数的时候,那么每个 ...

  8. 杭电多校第九场 hdu6425 Rikka with Badminton 组合数学 思维

    Rikka with Badminton Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/O ...

  9. 牛客第七场 Sudoku Subrectangles

    链接:https://www.nowcoder.com/acm/contest/145/J来源:牛客网 You have a n * m grid of characters, where each ...

  10. 【Offer】[67] 【把字符串转换成整数】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 将一个字符串转换成一个整数(实现Integer.valueOf(string)的功能,但是string不符合数字要求时返回0),要求不能 ...