关闭

js中的定时器和计时器使用

883人阅读 评论(0) 收藏 举报

最近写一些JS动画,常用到JS中的定时器(setTimeout & set Interval),查找相关资料,有些心得与大家一起分享。

使用setTimeout & set Interval创建的定时器可以实现有趣且有用的功能,初学者可能对Javascript的定时器有误解,认为它们是线程,其实Javascript是运行于单线程中的,而定时器仅仅是计划在未来的某个时间执行,而具体的执行时间是不能保证的,因为在页面的生命周期中,不同的时间可能有其它代码在控制Javascript的里进程。浏览器只是负责进行排序,指派某个代码在某个时间点运行。

下面说下Javascript线程,下图表示javascript进程时间线。

image

除了javascript执行进程外,还有一个需要在进程下一次空闲时间执行的代码队列,随着页面在其生命周期内的推移,代码会按照执行顺序添加到对列中,例如:当一个按钮被按下时,它的事件处理就会添加到队列中,并在下一个可能的时间内执行。

定时器对队列的工作方式是,当特定的时间过去后,将代码插入,注意添加到队列并不意味着它会马上执行,而只能说它会尽快执行,设定一个250ms后执行的定时器,不代表250ms后它会马上执行,它只会表示在150ms后被加入到队列中,如果这个时间点队列是空闲的,那么这段代码就会被执行。

请看以下代码:

var btn = document.getElementById("mybtn");
    btn.onclick = function () {
        setTimeout(function () {
            document.getElementById("message").nodeName = "mymessage";
            //其它代码
        }, 250);
    }

对于定时器最要注意的是:指定的时间间隔表示何时将定时器的代码添加到队列中,而不是何时执行代码。关于这个onclick事伯处理的进程时间线请看下图:

image

setTimeout() :未来的某时执行代码 ;clearTimeout() :取消setTimeout()。
下面展示一个简单的计时,并带有停止功能:
<script type="text/javascript">
    var c = 0
    var t
    function timedCount() {
        document.getElementById('txt').value = c
        c = c + 1
        t = setTimeout("timedCount()", 1000)
    }
 
    function stopCount() {
        clearTimeout(t)
    }
</script>
 
<input type="button" value="开始计时!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时!" onClick="stopCount()">
 
  

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

关于重复定时器,我们既可以使用setTimeout来重复创建就时器,也可以直接用setInterval,使用setInterval创建的定时器确保了定时器规则地插入队列中,这个方式问题在于代码可能在再次添加到队列之前还没有完成执行,可能寻到定时器重复运行好几次,而中间没有停顿,然而现在的javascript引擎很聪明,能避免这个问题,当使用setInterval时,仅当没有定时器的任何其它代码时,才将定时器代码添加到队列中,这样会确保定时器代码加入到队列的时间的间隔是为指定的间隔,请注意这只是加入队列的时间间隔,并不是执行代码的时间间隔,所以使用setInterval还是会存在两个问题:(1)某些间隔会被跳过了(2)多个定时器的代码执行间隔可能会比预期的要小。

为避免这些问题,可以使用如下模式使用链式setTimeout调用:

setTimeout(function () {
        //处理中
        setTimeout(arguments.callee, interval);
    }, interval)

在上面的计时DEMO中也是使用此模式来做循环的。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:127358次
    • 积分:3420
    • 等级:
    • 排名:第10123名
    • 原创:148篇
    • 转载:501篇
    • 译文:0篇
    • 评论:9条
    最新评论