资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JavaScript定时器如何实现

本篇内容介绍了“JavaScript定时器如何实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

成都创新互联公司科技有限公司专业互联网基础服务商,为您提供内江机房主机托管高防物理服务器租用,成都IDC机房托管,成都主机托管等互联网服务。

一、 setTimeout() 定时器

语法:

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
例如:写一个页面,让其五秒钟后弹出‘你好'。

代码如下:

window.setTimeout(function(){
            alert('你好');
        },5000);

运行结果为:

JavaScript定时器如何实现

需要注意的是:

  • window 可以省略。

  • 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。

  • 延迟的毫秒数省略默认是 0,如果写,必须是毫秒。setTimeout() 这个调用函数我们也称为回调函数callback,普通函数是按照代码顺序直接调用。而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。

二、停止 setTimeout() 定时器

当我们创建了一个定时器的话,如果我们想要将其取消,应该怎样操作呢?就用到了清除定时器的函数,如下:

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器。
这里面window 可以省略,并且里面的参数就是定时器的标识符 。

举个例子:

就上述案列,如果我们想要在指定事件前停止它,可以先添加一个点击按钮,给这个按钮添加清除定时器的事件,操作为:

  var hello = window.setTimeout(function(){
            alert('你好');
        },5000);
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            window.clearTimeout(hello);
        })

运行效果为:

JavaScript定时器如何实现

可以看到,当我们没有点击停止按钮的时候,五秒钟后弹出‘你好',刷新页面后,当我们点击按钮后,不论过多久,都不会有弹窗,清除定时器成功。

三、setInterval() 定时器

我们再来看看另一种定时器。

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。

  • window 可以省略。

  • 这个调用函数可以直接写函数,或者写函数名或者采取字符串 ‘函数名()' 三种形式。

  • 间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。

  • 我们经常给定时器赋值一个标识符。

  • 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。

举个例子:

我们来写一个定时器,让其每隔一秒就打印一个‘你好',代码为:

  setInterval(function(){
            console.log('你好')
        },1000);

运行效果为:

JavaScript定时器如何实现

四、清除setInterval() 定时器

同样的,我们也可以清除setInterval() 定时器的效果,语法为:

window.clearInterval(intervalID);

 clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

注意:

  • window 可以省略。

  • 里面的参数就是定时器的标识符 。

比如我们现在有两个按钮,点击一个可以开启定时器,点击另一个可以清除该定时器,操作方法为:


    开始
    停止
    

运行效果为:

JavaScript定时器如何实现

五、电子时钟案例

我们现在就可以做一个电子时钟,显示当前的年月日时分秒,并让他们自动变化,代码如下:




    
    
    
    Document
    


    
    

运行效果为:

JavaScript定时器如何实现

“JavaScript定时器如何实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


本文标题:JavaScript定时器如何实现
转载注明:http://cdkjz.cn/article/iiopgs.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220