JS中的计时器事件

JS可以实现很多java代码不易完成的功能。这里学习一些js中的计时器事件。

JavaScript 一个设定的时间间隔之后来执行代码，称之为计时事件。

主要通过两个方法来实现：

1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

2.setTimeout() - 暂停指定的毫秒数后执行指定的代码

并且，这两个方法都是window对象的方法。

首先，介绍setInterval()方法，该方法值得是间隔一定的毫秒数不停的执行指定的代码。

语法：window.setInterval(”js代码，函数等“，毫秒数);

实例1：每三秒弹出一个hello

setInterval(function(){alert("Hello")},3000);

实例2：显示当前时间，通过按钮实现时间的停止，开始

<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>
setTimeout() 方法

在html或jsp中

<body>
    <h4 id="demo"></h4>
    <input type="button" onclick="startTimer()" value="开始">
    <input type="button" onclick="stopTimer()" value="停止">
</body>

对于setTimeout()方法，指的是指定的毫秒数后执行指定的代码或方法。

语法：window.setTimeout("javascript 函数",毫秒数);

实例1：3秒钟后弹出”hello“提示框

setTimeout(function(){alert("Hello")},3000);

实例2：三秒钟后跳转到前一个页面

<script type="text/javascript">
    setTimeout(function(){
            window.history.back();
    },3000);
</script>

如何执行停止呢？

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。这里注意myVar必须是一个全局变量。实例如下：

var myVar;
    function myFunction()
    {
    myVar=setTimeout(function(){alert("Hello")},3000);
    }

    function myStopFunction()
    {
    clearTimeout(myVar);
    }

以上就把js计时器的基本功能简要介绍了，具体的使用场景，想要深刻理解，只有到项目用到时方可有新的理会。

posted on 2015-01-13 00:06 幸运的凌人阅读(11422) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

代码&优雅着&生活

导航

公告

统计

搜索

常用链接

我的标签

随笔档案

算法

阅读排行榜

评论排行榜

推荐排行榜

最新评论

JS中的计时器事件