草庐IT

JavaScript setTimeout() 用法详解

runoob 2023-03-28 原文

setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

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

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

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

实例



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

尝试一下 »

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

setTimeout() 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的代码, 如下图:

setTimeout() 也可以用来执行指定的函数(function)，如下实例，网页上的文字会在三秒后消修改。

实例



<p id="content"> 请等三秒钟!</p>  
<script>  
setTimeout("changeState()",3000 );  
function changeState(){  
    let content=document.getElementById('content');  
    content.innerHTML="<div style='color:red'>我是三秒后显示的内容！</div>";  
}  
</script>

尝试一下 »

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

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

实例



<input type="text" id="displayBox" name="displayBox" value="0">
 
<script>
x = 0
function countSecond() 
{　
    x = x+1
    document.getElementById("displayBox").value=x 
    setTimeout("countSecond()", 1000)
}
// 执行函数
countSecond()
</script>

尝试一下 »

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

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

实例



<input type="text" id="displayBox" name="displayBox" value="0">
 
<script>
x = 0
function countSecond() 
{　
    if(x<20) {
        x = x+1
        document.getElementById("displayBox").value=x 
        setTimeout("countSecond()", 1000)
    }
}
// 执行函数
countSecond()
</script>

尝试一下 »

实例中在 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() 的操作。

如下实例：

实例



<form name="display1">   
    <input type="text" id="box1" name="box1" value="0" size="4" />   
    <input type="button" value="停止计时" onclick="clearTimeout(meter1)" />   
    <input type="button" value="继续计时" onclick="count1() " />   
</form>   
<p></p>  
<form name="display2">   
    <input type="text" id="box2" name="box2" value="0" size="4" />   
    <input type="button" value="停止计时" onclick="clearTimeout(meter2) " />   
    <input type="button" value="继续计时" onclick="count2( ) " />   
</form>   
<script>  
x = 0  
y = 0  
  
function count1( )  
{　
    x = x+ 1  
    document.getElementById("box1").value= x  
    meter1=setTimeout("count1()", 1000)  
}
 
function count2( )
{　
    y = y+ 1  
    document.getElementById("box2").value= y  
    meter2=setTimeout("count2()", 1000)  
}  
// 执行函数
count1( )  
count2( )  
</script>

尝试一下 »

相关页面

Window 对象: setTimeout() 方法

Window 对象: setTimeout() 方法

Window 对象: setInterval() 方法

用法详解spanclasshl

有关JavaScript setTimeout() 用法详解的更多相关文章

  1. ruby - 有人可以解释一下在 Ruby 中注入(inject)的真实、通俗易懂的用法吗？ - 2

    我正在学习Ruby，遇到了inject。我正处于理解它的风口浪尖，但当我是那种需要真实世界的例子来学习一些东西的人时。我遇到的最常见的例子是人们使用inject来添加一个(1..10)范围的总和，我不太关心这个。这是一个任意的例子。在实际程序中我会用它做什么？我正在学习，所以我可以继续使用Rails，但我不必有一个以Web为中心的示例。我只需要一些我可以全神贯注的目标。谢谢大家。 最佳答案 inject有时可以通过它的“其他”名称reduce更好地理解。它是一个对Enumerable进行操作(迭代一次)并返回单个值的函数。它有许多有

  2. ruby - 使用法拉第上传文件 - 2

    我在尝试使用Faraday将文件上传到网络服务时遇到问题。我的代码:conn=Faraday.new('http://myapi')do|f|f.request:multipartendpayload={:file=>Faraday::UploadIO.new('...','image/jpeg')}conn.post('/',payload)尝试发布后似乎没有任何反应。当我检查响应时this是我所看到的:#:post,:body=>#,#,@opts={}>,#],@index=0>>,#>],@ios=[#,#,@opts={}>,#],@index=0>,#],@index=0>

  3. ruby - rspec: raise_error 用法来匹配错误信息 - 2

    我使用raise(ConfigurationError.new(msg))引发错误我试着用rspec测试一下:expect{Base.configuration.username}.toraise_error(ConfigurationError,message)但这行不通。我该如何测试呢？目标是匹配message。 最佳答案 您可以使用正则表达式匹配错误消息:it{expect{Foo.bar}.toraise_error(NoMethodError,/private/)}这将检查NoMethodError是否由privateme

  4. 物联网MQTT协议详解 - 2

    一、什么是MQTT协议MessageQueuingTelemetryTransport：消息队列遥测传输协议。是一种基于客户端-服务端的发布/订阅模式。与HTTP一样，基于TCP/IP协议之上的通讯协议，提供有序、无损、双向连接，由IBM（蓝色巨人）发布。原理：（1）MQTT协议身份和消息格式有三种身份：发布者（Publish）、代理（Broker）（服务器）、订阅者（Subscribe）。其中，消息的发布者和订阅者都是客户端，消息代理是服务器，消息发布者可以同时是订阅者。MQTT传输的消息分为：主题（Topic）和负载（payload）两部分Topic，可以理解为消息的类型，订阅者订阅（Su

  5. Tcl脚本入门笔记详解（一） - 2

    TCL脚本语言简介•TCL（ToolCommandLanguage）是一种解释执行的脚本语言（ScriptingLanguage）,它提供了通用的编程能力：支持变量、过程和控制结构；同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发，脚本编程，GUI和测试等方面。•实际上包含了两个部分：一个语言和一个库。首先，Tcl是一种简单的脚本语言，主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的，因此在某种意义上我们又可以把TCL看作C库，这个库中有丰富的用于扩展TCL命令的C\C++过程和函数，所以，Tcl是

  6. 【ChatGPT】ChatGPT 的 N 种用法 - 2

    目录ChatGPT简介技术原理应用未来发展ChatGPT的10 种用法ChatGPT简介ChatGPT是一种基于深度学习的大型语言模型，由OpenAI公司开发。技术原理GPT是GenerativePre-trainedTransformer的缩写，意为生成式预训练变压器。它的技术原理是使用了一个基于注意力机制的变压器（Trans

  7. ruby - 是否有 Rack::Session::Cookie 用法的基本示例？ - 2

    我找不到任何使用Rack::Session::Cookie的简单示例，并且希望能够将信息存储在cookie中，并在以后的请求中访问它并让它过期.这些是我能找到的唯一示例:HowdoIset/getsessionvarsinaRackapp?http://rack.rubyforge.org/doc/classes/Rack/Session/Cookie.html这是我得到的:useRack::Session::Cookie,:key=>'rack.session',:domain=>'foo.com',:path=>'/',:expire_after=>2592000,:secret=

  8. ruby - Ruby 方法的双冒号(双列或::)语法的惯用用法 - 2

    我是Ruby的新手，发现以下几对令人困惑示例同样有效:File.included_modulesFile::included_modulesFile.stat('mbox')#Returnsa'#'objectFile::stat('mbox')File.new("foo.txt","w")File::new("foo.txt","w")"asdf".size#Aninstancemethod"asdf"::size2+32::send(:+,3)#AnextremeexampleFile::new，尤其是我经常遇到的东西。我的问题:如果我永远避免使用::运算符来限定除类、模块和常量之

  9. 【详解】Docker安装Elasticsearch7.16.1集群 - 2

    开门见山|拉取镜像dockerpullelasticsearch:7.16.1|配置存放的目录#存放配置文件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/config#存放数据的文件夹mkdir-p/opt/docker/elasticsearch/node-1/data#存放运行日志的文件夹mkdir-p/opt/docker/elasticsearch/node-1/log#存放IK分词插件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/plugins若你使用了moba，直接右键新建即可如上图所示依次类推创建

  10. 【Elasticsearch基础】Elasticsearch索引、文档以及映射操作详解 - 2

    文章目录概念索引相关操作创建索引更新副本查看索引删除索引索引的打开与关闭收缩索引索引别名查询索引别名文档相关操作新建文档查询文档更新文档删除文档映射相关操作查询文档映射创建静态映射创建索引并添加映射概念es中有三个概念要清楚，分别为索引、映射和文档（不用死记硬背，大概有个印象就可以）索引可理解为MySQL数据库；映射可理解为MySQL的表结构；文档可理解为MySQL表中的每行数据静态映射和动态映射上面已经介绍了，映射可理解为MySQL的表结构，在MySQL中，向表中插入数据是需要先创建表结构的；但在es中不必这样，可以直接插入文档，es可以根据插入的文档（数据），动态的创建映射（表结构），这就

随机推荐