js中的计时器事件`setTimeout()` 和 `setInterval()`

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);
    }

原文地址:https://www.cnblogs.com/hubufen/p/10888291.html

时间: 2024-10-17 12:15:04

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

JS中的计时器事件

JS可以实现很多java代码不易完成的功能.这里学习一些js中的计时器事件. JavaScript 一个设定的时间间隔之后来执行代码,称之为计时事件. 主要通过两个方法来实现: 1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码. 2.setTimeout() - 暂停指定的毫秒数后执行指定的代码 并且,这两个方法都是window对象的方法. 首先,介绍setInterval()方法,该方法值得是间隔一定的毫秒数不停的执行指定的代码. 语法:window.setInterv

JS中的定时函数(setTimeout,clearTimeout,setInterval,clearInterval详解 )

设置定时器,在一段时间之后执行指定的代码,setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一: window.setTimeout("alert('ok')",5000); 方法二: window.setTimeout(function() { alert("Ok"); }, 5000); 方法三: function showAlert() { alert("ok"); } window.s

js中的Dom事件模型以及表格方面等内容

1.实现评论页面的制作 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #outside{ width: 1000px; margin: 0 auto; border: 1px solid #E7EAEE; overflow: hidden; pad

js中获取键盘事件

1 <script type="text/javascript" language=JavaScript charset="UTF-8"> 2 document.onkeydown=function(event){ 3 var e = event || window.event || arguments.callee.caller.arguments[0]; 4 if(e && e.keyCode==27){ // 按 Esc 5 //要

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">        

js中的计时器

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

js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()

  在js应用中,定时器的作用就是可以设定当到达一个时间来执行一个函数,或者每隔几秒重复执行某段函数.这里面涉及到了三个函数方法:setInterval().setTimeout().clearInterval(),本文将围绕这三种函数的用法,来实现定时器的功能,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望对大家有所帮助. 定时器的应用需求: 1.设定一个时间,当时间到达的时候执行函数----比如:倒计时跳转页面等等. 2.每隔一段时间重复执行某段函数----比如抢票软件,

js中鼠标滚轮事件详解

(以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题 附加事件 其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc

js中获取键盘事件【转】

<script type="text/javascript" language=JavaScript charset="UTF-8"> 2 document.onkeydown=function(event){ 3 var e = event || window.event || arguments.callee.caller.arguments[0]; 4 if(e && e.keyCode==27){ // 按 Esc 5 //要做的