请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 236|回复: 0

JavaScript setTimeout() 用法详解

[复制链接]
  • TA的每日心情
    开心
    2019-5-30 08:42
  • 签到天数: 10 天

    [LV.3]偶尔看看II

    493

    主题

    498

    帖子

    2293

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    2293
    admin实名认证 发表于 2019-6-6 17:13:05 | 显示全部楼层 |阅读模式
    setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式。
    语法格式可以是以下两种:
    1. setTimeout(要执行的代码, 等待的毫秒数)
    2. setTimeout(JavaScript 函数, 等待的毫秒数)
    复制代码
    例如:
    1. setTimeout("alert('对不起, 要你久候')", 3000 )
    复制代码
    在测试代码中我们可以看到页面在开启三秒后, 就会出现一个 alert 对话框。
    setTimeout() 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的代码, 如下图:
    2013041416352494.gif
    setTimeout() 也可以用来执行指定的函数(function),如下实例,网页上的文字会在三秒后消修改。
    1. <p id="content"> 请等三秒钟!</p>  
    2. <script>  
    3. setTimeout("changeState()",3000 );  
    4. function changeState(){  
    5.     let content=document.getElementById('content');  
    6.     content.innerHTML="<div style='color:red'>我是三秒后显示的内容!</div>";  
    7. }  
    8. </script>
    复制代码
    实例中设定了等待 3 秒 (3000 milliseconds) 后浏览器就会执行 changeState( ) 这一个函数。
    接下来我们可以通过 setTimeout() 不断执行指定函数来实现一个计数器:
    1. <input type="text" id="displayBox" name="displayBox" value="0">

    2. <script>
    3. x = 0
    4. function countSecond()
    5. { 
    6.     x = x+1
    7.     document.getElementById("displayBox").value=x
    8.     setTimeout("countSecond()", 1000)
    9. }
    10. // 执行函数
    11. countSecond()
    12. </script>
    复制代码
    实例中页面在载入后执行 countSecond() 函数,该函数内使用了 setTimeout() 方法,该方法在每隔一秒调用 countSecond() 函数,所以最终会导致 countSecond( ) 每秒执行一次,实现计数效果。
    当然我们也可以在计数器的函数上添加一些片段,实现在指定条件下停止计数:
    1. <input type="text" id="displayBox" name="displayBox" value="0">

    2. <script>
    3. x = 0
    4. function countSecond()
    5. { 
    6.     if(x<20) {
    7.         x = x+1
    8.         document.getElementById("displayBox").value=x
    9.         setTimeout("countSecond()", 1000)
    10.     }
    11. }
    12. // 执行函数
    13. countSecond()
    14. </script>
    复制代码
    实例中在 x 小于 20 的时候会每秒执行一次 countSecond() 函数,在 x 大于等于20 的时候就会停止执行。
    既然有开始计数,那么相对应的就要有停止计数,停止计时使用的函数为 clearTimeout()。
    setTimeout() 方法可以使到浏览器不断执行一段代码或一个函数 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这方法。
    clearTimeout() 语法:
    1. clearTimeout(timeoutID)
    复制代码
    timeoutID 为调用 setTimeout() 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setTimeout() 所设定的定时执行操作。
    1. meter1 =setTimeout("count1()", 1000)
    2. meter2 =setTimeout("count2()", 1000)
    复制代码


    maomivip@mail.com
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|赢创志诚服务网 ( 鲁ICP备19000917号 )

    GMT+8, 2019-8-20 13:12 , Processed in 0.066418 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表