点一点阅读更舒适~

JavaScript之使用定时器

《JavaScript之使用定时器》

window对象包含四个定时器专用方法,使用它们可以实现代码定时运行,从而避免连续运行。这样一来,我们就可以设计动画了。

 setTimeout()方法 — var o=setTimeout(code,delay);

参数code表示延迟执行的代码字符串,delay表示延迟的时间,一毫秒为单位。该方法返回的是一个Timer ID,这个ID编号指向延迟执行的代码控制句柄。如果把这个句柄传递给clearTimeout()方法,则会取消代码的延迟执行。

setTimeout()方法只能被执行一次,如果希望反复的执行该方法中包含的代码,则应该在setTimeout()方法中包含对自身的调用。

例1 在页面的文本框中按秒速度显示递加的数字,循环执行十次后,弹出提示信息,并调用clearTimeout()方法。

window.onload=function() {
    var t=document.getElementsByTagName("input")[0],
        i=1;
    function f() {
        var out=setTimeout(function() {
            t.value=i++;
            f();
        },1000);
        if(i>10) {
            clearTimeout(out);
            alert("stop");
        }
    }
    f();
}

setInterval()方法 — var o=setInterval(code,interval)

这个方法和setTimeout的方法基本相同,该方法能够周期性地执行指定的代码。所以使用setTimeout实现循环执行指定代码,不如直接用该方法实现。比如上面的例子可以改为:

例2

window.onload=function() {
    var t=document.getElementsByTagName("input")[0],
        i=1,
        out=setInterval(f,1000);
    function f() {
        t.value=i++;
        if(i>10) {
            clearInterval(out);
            alert("stop");
        }
    }
}

在动画设计中,setTimeout()方法适合在不确定时间内持续执行某个动作,儿setInterval()方法适合在有限的时间内执行可以确定起点和终点的动画。

《JavaScript之使用定时器》

  点赞
本篇文章采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
转载请务必注明来源: https://oldpan.me/archives/javascript-use-timer

   欢迎关注Oldpan博客微信公众号,同步更新博客深度学习文章。


发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论审核已启用。您的评论可能需要一段时间后才能被显示。