zoukankan      html  css  js  c++  java
  • 浅谈JavaScript计时器

    JavaScript计时器

    1.什么是JavaScript计时器?

    在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。

    2.计时器类型

    一次性计时器:仅在指定的延迟时间之后触发一次。
    间隔性触发计时器:每隔一定的时间间隔就触发一次

    3.计时器方法

    1):一次性计时器

    A):setTimeout(): 指定的延迟时间之后来执行代码,进执行一次

    语法:setTimeout(代码,延迟时间);

    参数说明:

    1. 要调用的函数或要执行的代码串。
    2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。

    B):clearTimeout():取消setTimeout()设置

    语法:clearTimeout(timer)

    参数说明:
    timer由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

    调用setTimeout()和clearTimeout()延迟方法:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>JavaScript计时器</title>
            <input type="button" value="开始" id="btnStart" onclick="StartPrint()">
            <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
            <br>
        </head>
        <body>
            <script type="text/javascript">
                //定义打印方法
                function Print()
                {
                    console.log("我在打印!");
                    
                }
                
                var timer;//该值标识要取消的延迟执行代码块
                //开始打印
                function StartPrint()
                {
                    timer=setTimeout(Print,1000);//调用计时器,延迟1秒打印,只执行一次
                
                }
                
                //结束打印
                function StopPrint()
                {
                    clearTimeout(timer);//取消计时器
                }
            </script>
        </body>
    </html>

    调用setTimeout()和clearTimeout()无限循环方法:

    <!DOCTYPE html>
    <html> <head> <meta charset="utf-8"> <title>JavaScript计时器</title> <input type="button" value="开始" id="btnStart" onclick="StartPrint()"> <input type="button" value="暂停" id="btnStop" onclick="StopPrint()"> <br> </head> <body> <script type="text/javascript"> //定义打印方法 function Print() { console.log("我在打印!"); timer=setTimeout(Print,1000);//开始计时器,调用自己,进行无穷循环 } var timer;//该值表示要取消延迟执行的代码块 //开始打印 function StartPrint() { Print();//调用打印方法 } //结束打印 function StopPrint() { clearTimeout(timer);//取消计时器 } </script> </body> </html>

    2):间隔性触发计时器

    A):setInterval():在执行时,从载入页面后每隔指定的时间执行代码

    语法:setInterval(代码,交互时间);

    参数说明:

    1. 代码:要调用的函数或要执行的代码串。

    2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。

    返回值:

    一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

    调用函数格式(假设有一个clock()函数):

    setInterval("clock()",1000) 或 setInterval(clock,1000)

     

    B):clearInterval() 方法可取消由 setInterval() 设置的交互时间

    语法:clearInterval(timer)

    参数说明:
    timer:由 setInterval() 返回的 ID 值。

    调用setInterval()和clearInterval() 执行间隔执行方法实例

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>JavaScript计时器</title>
            <input type="button" value="开始" id="btnStart" onclick="StartPrint()">
            <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
            <br>
        </head>
        <body>
            <script type="text/javascript">
                //定义打印方法
                function Print()
                {
                    console.log("我在打印!");
                }
                
                var timer;//该值标识要取消的计时器执行代码块
                //开始打印
                function StartPrint()
                {
                timer=setInterval("Print()",1000);//开始计时器
                }
                
                //结束打印
                function StopPrint()
                {
                    clearInterval(timer);;//取消计时器
                }
            </script>
        </body>
    </html>
  • 相关阅读:
    面向对象之继承
    面向对象
    Python—文件和内建函数 open(),file()
    如何在命令行打开文件夹?
    Anaconda在win10下的安装
    Python—for循环和range()内建函数
    python—基础练习2
    python—数据类型
    python—字符编码
    python—基础练习1
  • 原文地址:https://www.cnblogs.com/ToNi/p/4272503.html
Copyright © 2011-2022 走看看