JavaScript setTimeout() 介绍
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="停止计时" οnclick="clearTimeout(meter1)" /> <input type="button" value="继续计时" οnclick="count1() " /> </form> <p></p> <form name="display2"> <input type="text" id="box2" name="box2" value="0" size="4" /> <input type="button" value="停止计时" οnclick="clearTimeout(meter2) " /> <input type="button" value="继续计时" οnclick="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>
尝试一下 »
JavaScript setTimeout() 介绍相关推荐
- JavaScript基础介绍
JavaScript简单介绍 1.JavaScript的简介 是基于对象和事件驱动的语言,应用与客户端. - 基于对象:提供的对象可直接拿过来使用 - 事件驱动:html做网站静态效果,JavaScr ...
- Javascript setTimeout()
文章目录 示例 1:3 秒后显示一次文本 示例 2:每 3 秒显示一次时间 JavaScript clearTimeout() 示例 3:使用 clearTimeout() 方法 参考文档 在 ...
- javascript setTimeout 参数最大值问题和递归调用
javascript setTimeout 参数最大值问题和递归调用 这是一段最简单的代码 setTimeout(() => {console.log('3s后触发'); }, 3000); 但 ...
- JavaScript setTimeout用法,js setTimeout带参数
JavaScript setTimeout用法,js setTimeout带参数 ================================ ©Copyright 蕃薯耀 2021-07-07 ...
- javascript数据结构-介绍
github博客地址 名词解释 数据结构是计算机存储.组织数据的方式.数据结构是指相互之间存在一种或多种特定关系的数据元素的集合.通常情况下,精心选择的数据结构可以带来更高的运行或者存储效率.数据结构 ...
- JavaScript setTimeout函数
setTimeout的作用:延迟一段时间执行某个函数. 例如:setTimeout(function(){alert("延迟5秒执行...")},5000); 注意:setTime ...
- JavaScript入门介绍 1 2021/02/27
一.JavaScript简介一 1.1 javascript 简介 JavaScript是Web页面中的一种脚本编程语言,可用于Web系统的客户端和服务器端编程 前身叫做LiveScript,是Net ...
- JavaScript范围介绍
Scope defines the lifetime and visibility of a variable. Variables are not visible outside the scope ...
- 支付宝吱口令自动复制脚本,自动复制 JavaScript 代码介绍
本文转自:http://www.sojson.com/blog/262.html 最近支付宝#吱口令#的信息随处可见,可谓是铺天盖地,群里发这样的信息给被踢了不少.我开始还在鄙视这些人,有几个小钱?然 ...
最新文章
- 百联OJ:2723:不吉利日期
- 容器源码解析之LinkedHashMap(九)
- 真得好好细讲文件上传,否则漏洞百出
- vue 新窗口打开外链接
- guice注入带参构造器_带有Guice的富域模型
- 《面向对象程序设计》课程作业二
- BlackBerry Key2 键盘扩展
- linux脚本 let,通过shell 脚本查看服务器的时时流量
- VB 将文件夹复制到指定目录
- u盘怎么重装系统win11教程
- EasyAndroid基础集成组件库之:EasyReflect 优雅的反射功能库
- 工具分享:VISIO 2010版windows_64正版软件32位(附下载链接)
- PS教程:逼真的模特投影
- Sequel pro 连接mysql 报MySQL said: Authentication plugin 'caching_sha2_password' cannot be loaded...
- 平均查找长度 (ASL)
- 一入IT深似海,从此都是考证人~耗时,耗力,耗财,耗头发考过的证书 千万不要忘了延续~
- JavaEE企业级实战项目 智牛股第五天 Netty的使用和项目数据库搭建
- 如何改进项目的经验教训总结会
- php开源电影,迅睿PHP开源视频电影CMS系统 v1.1.0
- 2022年全球及中国家用破壁料理机行业头部企业市场占有率及排名调研报告