详解JavaScript setTimeout()

在制作网页动态效果时,可能会遇到需要延时在执行的需求,这时就可以用到 js 中定时器来实现此类需求,本文将对setTimeout()做一个用法总结。

语法格式可以是以下两种:

setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)

接下来我们先来看一个简单的例子:

实例

setTimeout("alert('对不起, 要你久候')", 3000 )

尝试一下 » 在测试代码中我们可以看到页面在开启三秒后, 就会出现一个 alert 对话框。

setTimeout() 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的代码, 如下图: setTimeout() 也可以用来执行指定的函数(function),如下实例,网页上的文字会在三秒后消修改。

实例

"content"> 请等三秒钟!

  

尝试一下 » 实例中设定了等待 3 秒 (3000 milliseconds) 后浏览器就会执行 changeState( ) 这一个函数。

接下来我们可以通过 setTimeout() 不断执行指定函数来实现一个计数器:

实例

type="text" id="displayBox" name="displayBox" value="0">

尝试一下 » 实例中页面在载入后执行 countSecond() 函数,该函数内使用了 setTimeout() 方法,该方法在每隔一秒调用 countSecond() 函数,所以最终会导致 countSecond( ) 每秒执行一次,实现计数效果。

当然我们也可以在计数器的函数上添加一些片段,实现在指定条件下停止计数:

实例

type="text" id="displayBox" name="displayBox" value="0">

尝试一下 » 实例中在 x 小于 20 的时候会每秒执行一次 countSecond() 函数,在 x 大于等于20 的时候就会停止执行。

既然有开始计数,那么相对应的就要有停止计数,停止计时使用的函数为 clearTimeout()。

setTimeout() 方法可以使到浏览器不断执行一段代码或一个函数 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这方法。

clearTimeout() 语法:

clearTimeout(timeoutID)

timeoutID 为调用 setTimeout() 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setTimeout() 所设定的定时执行操作。

meter1 =setTimeout("count1()", 1000)
meter2 =setTimeout("count2()", 1000)

使用 meter1 与 meter2 作为 timeoutID 的名称, 在设定 clearTimeout( ) 时, 就可指定对哪一个 setTimeout() 有效, 不会影响另一个 setTimeout() 的操作。

如下实例:

实例


  
   "display1">      
   type=
   "text" id=
   "box1" name=
   "box1" value=
   "0" size=
   "4" />      
   type=
   "button" value=
   "停止计时" onclick=
   "clearTimeout(meter1)" />      
   type=
   "button" value=
   "继续计时" onclick=
   "count1() " />   
    

   "display2">       type= "text" id= "box2" name= "box2" value= "0" size= "4" />       type= "button" value= "停止计时" onclick= "clearTimeout(meter2) " />       type= "button" value= "继续计时" onclick= "count2( ) " />     

尝试一下 »

文章来源网络,作者:运维,如若转载,请注明出处:https://shuyeidc.com/wp/221074.html<

(0)
运维的头像运维
上一篇2025-04-14 20:59
下一篇 2025-04-14 21:01

相关推荐

  • 个人主题怎么制作?

    制作个人主题是一个将个人风格、兴趣或专业领域转化为视觉化或结构化内容的过程,无论是用于个人博客、作品集、社交媒体账号还是品牌形象,核心都是围绕“个人特色”展开,以下从定位、内容规划、视觉设计、技术实现四个维度,详细拆解制作个人主题的完整流程,明确主题定位:找到个人特色的核心主题定位是所有工作的起点,需要先回答……

    2025-11-20
    0
  • 社群营销管理关键是什么?

    社群营销的核心在于通过建立有温度、有价值、有归属感的社群,实现用户留存、转化和品牌传播,其管理需贯穿“目标定位-内容运营-用户互动-数据驱动-风险控制”全流程,以下从五个维度展开详细说明:明确社群定位与目标社群管理的首要任务是精准定位,需明确社群的核心价值(如行业交流、产品使用指导、兴趣分享等)、目标用户画像……

    2025-11-20
    0
  • 香港公司网站备案需要什么材料?

    香港公司进行网站备案是一个涉及多部门协调、流程相对严谨的过程,尤其需兼顾中国内地与香港两地的监管要求,由于香港公司注册地与中国内地不同,其网站若主要服务内地用户或使用内地服务器,需根据服务器位置、网站内容性质等,选择对应的备案路径(如工信部ICP备案或公安备案),以下从备案主体资格、流程步骤、材料准备、注意事项……

    2025-11-20
    0
  • 如何企业上云推广

    企业上云已成为数字化转型的核心战略,但推广过程中需结合行业特性、企业痛点与市场需求,构建系统性、多维度的推广体系,以下从市场定位、策略设计、执行落地及效果优化四个维度,详细拆解企业上云推广的实践路径,精准定位:明确目标企业与核心价值企业上云并非“一刀切”的方案,需先锁定目标客户群体,提炼差异化价值主张,客户分层……

    2025-11-20
    0
  • PS设计搜索框的实用技巧有哪些?

    在PS中设计一个美观且功能性的搜索框需要结合创意构思、视觉设计和用户体验考量,以下从设计思路、制作步骤、细节优化及交互预览等方面详细说明,帮助打造符合需求的搜索框,设计前的规划明确使用场景:根据网站或APP的整体风格确定搜索框的调性,例如极简风适合细线条和纯色,科技感适合渐变和发光效果,电商类则可能需要突出搜索……

    2025-11-20
    0

发表回复

您的邮箱地址不会被公开。必填项已用 * 标注