JS中setTimeout()的用法详解

2024-09-28 17:07:59

setTimeout
1. setTimeout 语法例子
2. 用 setTimeout 来执行 function
3. 不断重复执行的 setTimeout
4. 设定条件使 setTimeout 停止
5. 计分及计秒的 counter
clearTimeout
Set flag

1. SetTimeOut()

1.1 SetTimeOut()语法例子

1.2 用SetTimeOut()执行Function

1.3 SetTimeOut()语法例子

1.4 设定条件使SetTimeOut()停止

1.5 计分及秒的counter

2. ClearTimeout()

3. Set Flag

10.1　setTimeout( )

　　setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 setTimeout( ) 的语法。

1.　setTimeout( ) 语法例子

练习-69　等候三秒才执行的 alert( )

　　在第 3 章说到 alert 对话盒, 一般是用按钮叫出来, 在这练习, 你会看到网页开启后 3 秒, 就会自动出现一个 alert 对话盒。

1.　请用浏览器开启示范磁碟中的timeout1.htm, 这档桉有以下内容:

<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示范网页 </font> </h1> <p> </br>
<p> 请等三秒!

</body> </html>

2.　留意网页开启后三秒, 就会出现一个 alert 对话盒。

　　setTimeout( )是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function, 有以下语法:

　　今次例子是设定等 3 秒 (3000 milliseconds), 浏览器就会执行 alert( ) 这一个method。

2.　用 setTimeout( ) 来执行 function

　　setTimeout( ) 通常是与 function 一起使用, 以下是一个较上个练习複杂的例子。

练习-70　状态列中自动消失的文字

　　在练习-20, 你看过如何用按钮在状态列显示文字, 然后再用按钮消除文字, 在这练习, 你看到如何用按钮在状态列显示文字, 而这文字会在三秒后自动消失。

1.　请用浏览器开启示范磁碟中的timeout2.htm, 这档桉有以下内容:

<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示范网页 </font> </h1> <p> </br>

2.　请在按钮上按一下,你应见到状态列出现 Hello 这字, 留意过了三秒, 这字就会消失。

1.　这处先设定一个名为 clearWord( ) 的 function, 作以下定义:

window.status=""

　　这是用来消除状态列的文字 (请看练习-20 的说明), 浏览器执行 clearWord( ) , 就会消除状态列的文字。

2.　今次按钮设定了启动以下两项工作, 用，分隔, 浏览器会顺序执行这两项工作:

onClick="window.status='Hello' , setTimeout('clearWord( )', 3000) "

3.　今次的 setTimeout( ) 有以下设定:

　　这是设定等 3 秒 (3000 milliseconds) 浏览器就会执行 clearWord( ) 这一个function。

　　在第 2 章, 你看过如何使到父视窗开启时自动开启一个子视窗, 若观看者不关闭这子视窗, 这子视窗就会一路开启。看过以上的练习, 请你设计一个会开启子视窗的网页, 而这子视窗在开启后两秒, 就会自动关闭。

3.　不断重複执行的 setTimeout( )

　　setTimeout( ) 预设只是执行一次, 但我们可以使用一个循环方式, 使到一个setTimeout( ) 再启动自己一次, 就会使到第二个 setTimeout( ) 执行, 第二个又启动第三个, 这样循环下去, 这 setTimeout( ) 就会不断执行。

练习-71　自动每秒加 1 的 function

　　在这练习, 你看到如何使用 setTimeout( ) 令文字框的数值每秒就加 1, 当然你也可以设定其他递增的速度, 例如每五秒就加 5, 或每五秒就加 1。

1.　请用浏览器开启示范磁碟中的 timeout3.htm, 这档桉有以下内容:

<html> <head>
<script>
x = 0
function countSecond( )
{　x = x+1
　 document.fm.displayBox.value=x
　 setTimeout("countSecond()", 1000)
}
</script> </head>
<body bgcolor=lightcyan text=red> <p> </br>

<form name=fm>
<input type="text" name="displayBox"value="0" size=4 >
</form>

</body> </html>

2.　网页开启后, 请你留意文字框中的数值转变。

3.　请你将这档桉複製去硬碟, 更改一些设定, 例如 x = x+5, 或将等候时间改为5000, 看有什麽反应。

1.　这网页有两个 script, 第一个是设定 countSecond( ) 这个 function, 第二个在后的是在网页完全载入后, 就启动这 function。

2.　留意今次以下的设定:

function countSecond( )
{　x = x+1
　 document.fm.displayBox.value = x
　 setTimeout("countSecond()", 1000)
}

　　当 countSecond( ) 启动后, 就会启动 setTimeout( ), 这个 method 在一秒后又启动 countSecond( ), countSecond( ) 启动后又启动 setTimeout( ) , 所以得出的结果是 countSecond( ) 每秒执行一次。

3.　在 JavaScript, 我们是使用这处说的方法使到一些事项不断执行, 其中一个用途是显示转动时间, 另一个用途是设定跑动文字, 随后的章节会有例子。

　　用上述的方法设定时间, setTimeout( ) 虽然设定了是一秒, 但浏览器还有另外两项功能要执行, 所以一个循环的时间是稍多于一秒, 例如一分钟可能只有58 个循环。

4.　设定条件使 setTimeout( ) 停止

　　setTimeout( ) 的迴圈开始后, 就会不断重複, 在上个练习, 你看到文字框的数字不断跳动, 但我们是有方法使到数字跳到某一个数值就停下来, 其中一个方法是用 if...else 设定一个条件, 若是 TRUE 就继续执行 setTimeout( ) , 若是 FALSE 就停止。

　　例如要使到上个练习的 counter 跳到 20 就停下, 可将有关的 function 作以下的更改。

function countSecond( )
{　if ( x < 20 )
　　　{　x = x + 1
　　　　 document.displaySec.displayBox.value = x
　　　　 setTimeout("countSecond( )", 1000)
　　}
}

5.　计分及计秒的 counter

　　在前面的练习, 相信你已学识如何使用 setTimeout( ), 现在请你看一个较複习的例子。

练习-72　计时的 counter

　　在这练习, 你要设定两个文字框, 一个显示分钟, 另一个显示秒, 网页开启后, 就会在这两个文字框中自动计时。

1.　请用浏览器开启示范磁碟中的timeout4.htm, 这档桉有以下内容:

<html> <head>
<script>
x=0
y=-1

function countMin( )
{　y=y+1
　 document.displayMin.displayBox.value=y
　 setTimeout("countMin( )",60000)
}

function countSec( )
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}
</script> </head>

<body bgcolor=lightcyantext=red> <p> </br>

<table> <tr valign=top> <td> 你在本网页的连线时间是:</td>

<td> <form name=displayMin>
<input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 分 </td>

<td> <form name=displaySec></td>
<td> <input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 秒。</td> </tr> </table>

<script>
countMin( )
countSec( )
</script>
</body> </html>

2.　请你留意两个文字框中的数字转变。

1.　这网页有两个 function, 一个用来计分钟, 一个用来计秒。在这处, 笔者只是示范setTimeout( ) 的操作, 因为计时器有其他更精简的写法。(留意: 这方式的计时并不准确。)

2.　留意计秒的 function:

function countSec( )
{　x = x + 1
　 z = x% 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)

}

　　这处的 % 符号是 modulus (馀数), 例如 z = x % 60 表示先进行 x / 60, 得出的馀数作为 z 这变数, 例如 82 秒, modulus 就是 22, 所以文字框会显示 22 而不是 82。

3.　若你要将单位数字在前加上 0, 例如 01, 02, 03 等, 可用以下方法:

function countSec( )
{　x = x + 1
　 z = x % 60
　 if (z < 10)　{　z = "0"+ z　}
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}

10.2　clearTimeout( )

　　在前一节, 你看过如何使用 setTimeout( ) 来使到浏览器不断执行一个 function, 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这 method。

　　clearTimout( ) 有以下语法:　clearTimeout(timeoutID)

　　要使用 clearTimeout( ), 我们设定 setTimeout( ) 时, 要给予这 setTimout( ) 一个名称, 这名称就是 timeoutID , 我们叫停时, 就是用这 timeoutID来叫停, 这是一个自订名称, 但很多程式员就以 timeoutID 为名。

　　在下面的例子, 笔者设定两个 timeoutID, 分别命名为 meter1 及 meter2, 如下:

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

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

练习-73　可停止的 setTimeout( )

　　这练习以练习-71为蓝本, 但作了两个改变: (1) 有两个 setTimeout( ), (2) 有两个按钮, 分别可停止这两个 setTimout( )。

1.　请用浏览器开启示范磁碟中的clear.htm, 这档桉有以下内容:

<html> <head>
<script>
x = 0
y = 0

function count1( )
{　x = x+ 1
　 document.display1.box1.value= x
　 meter1=setTimeout("count1()", 1000)
}

function count2( )
{　y = y+ 1
　 document.display2.box2.value= y
　 meter2=setTimeout("count2()", 1000)
}
</script> </head>

<body bgcolor=lightcyantext=red> <p> </br>

<form name=display1>
<input type="text" name="box1"value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(meter1)" >
<input type=button value="继续计时" onClick="count1() " >
</form>
<p>
<form name=display2>
<input type="text" name="box2"value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(meter2) " >
<input type=button value="继续计时" onClick="count2( ) " >
</form>

<script>
count1( )
count2( )
</script>

</body> </html>

2.　留意网页中的两个文字框及内裡变动的数字, 每个文字框旁有两个按钮, 请你试试两个按钮的反应。

3.　请你连续按多次 [继续计时]的按钮, 留意数值的跳动加快了, 原因是每按一次就启动 function 一次, 每个 function 都令数值跳动, 例如启动同一的 function 四次, 就会一秒跳四次。(请看下一节)

10.3　Set flag

　　前个练习说到我们用一个按钮来启动一个 function, 每按一下就会启动这 function 一次, 请看以下例子。

练习-74　效果重複的 setTimeout( )

　　这练习实际是将 练习-73 简化, 只有一个计时器, 笔者想示范的是每按 [继续计时] 一次, 就会启动 count( ) 这 function 一次。

1.　请用浏览器开启示范磁碟中的flag1.htm, 这档桉有以下内容:

<html> <head>
<script>
x=0
function count( )
{　x = x + 1
　 document.display.box.value= x
　 timeoutID=setTimeout("count()", 1000)
}
</script> </head> <body bgcolor=lightcyantext=red> <p> </br>
<form name=display>
<input type="text" name="box"value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(timeoutID) " >
<input type=button value="继续计时" onClick="count( ) " >
</form> <p>

<script>
count( )
</script>
</body> </html>

2.　网页开启后, 你应见到文字框中的数字跳动, 请你按四次 [继续计时], 留意这会加快数字跳动, 原因是有关的 function 被开启了多个, 每个都会使数字转变。

3.　按了四次 [继续计时] 的按钮后, 请你按 [停止计时] 的按钮, 你会发现要按五次才能停止数字跳动。

　　在编写程式时, 我们常要提防使用者作出一些特别动作, 例如使用者按两次 [继续计时] 按钮, 这计时器就失准了。我们是否有办法使到一个按钮被按一次就失效呢? 这就不会产生重複效果。

　　笔者藉这处的例子 (随后还有多个例子), 解说程式中一个 set flag (设定旗标) 的概念, flag 是一个记认, 一般来说, 这可以是 0 或是 1 (也可用 on 或 off, 或任何两个自选的名称或数字), 但也可以是 2、3、4 或更大的数字, 在这例子有以下设定:

1.　程式开启时 flag=0。

2.　当 counter( ) 执行时会顺便将 flag 变为 1。

3.　在 [继续计时] 这按钮的反应中, 会先检查 flag 是 0 或是 1, 若是 0 就会产生作用, 若是 1 就没有反应。

4.　使用这 flag 的方式, count( ) 这 function 开启后, [继续计时] 这按钮就没有作用。

　　这处的 flag 是一个变数, 可任意取名, 我们用 flag来称呼这变数的原因, 是因为这变数好处一支旗, 将旗竖起 (flag is on), 就会产生一个作用, 将旗放下 (flag is off), 就产生另一个作用。

练习-75　只可开启一次的 function

　　这练习是将上个练习加多一个 flag, 使到每次只能有一个 count( ) 这 function 在进行。

1.　请用浏览器开启示范磁碟中的flag2.htm, 这档桉有以下内容:

<html> <head>
<script>
x = 0
flag = 0
function count( )
{　x = x+ 1
　 document.display.box.value= x
　 timeoutID=setTimeout("count()", 1000)
　 flag = 1
}

function restart( )
{　if (flag==0)
　　　{　count( )　}
}
</script> </head>

<script>
count( )
</script>

2.　在网页中, 你应见到三个按钮及文字框中的数字跳动。

3.　请你按 [Show flag]这按钮, 应见到一个话对盒显示 flag 是 1。

4.　请你按 [停止计时]这按钮, 数字停止跳动, 请你按 [Show flag] 这按钮, 应见到话对盒显示 flag 是 0。

5.　请你按多次 [继续计时]这按钮, 你应见到数字不会加快, 请你按 [Show flag]这按钮, 应见到话对盒显示 flag 变回 1。

1.　这网页第 4 行有这一句: flag=0 , 这是设定 flag 这变数及将初始值定为 0, 你也可将初始值定为 1, 随后有关的 0 和 1 对调。

2.　count( ) 这 function 最后一句是 flag=1 , 所以启动 count( ) 后, flag 就会变为 1。

3.　[继续计时] 的按钮是用来启动 restart( ), 这 function 有以下设定:

function restart( )
{　if (flag==0)
　　　{　count( )　}
}

　　这处的 if statement 检查 flag是否等于 0, 若是 0 就启动 count(), 若是 1 (即不是 0) 就没有反应,使用这方法, 若 count( )已在执行中, [继续计时] 这按钮不会有作用。

　　这处的 flag=1设定, 实际设为 1 或 2 或 3 等数值都是一样的,只要不是 0 就可以了, 所以这两个相对的旗标,看似是 "0" 和 "1", 实际是"0" 和 "non-zero" (非-0)。

4.　[停止计时] 的按钮有以下设定:

onClick="clearTimeout(timeoutID);flag=0"

　　这是停止 setTimeout( ) 的操作时,同时将 flag 转回 0, 这使到restart( ) 这function 可以重新启动 count()。

js学使用setTimeout实现轮循动画

本文实例为大家分享了setTimeout实现轮循动画的具体代码,供大家参考,具体内容如下代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id='box'></div> &
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

Document自带的方法: 循环执行:var timeid = window.setInterval("方法名或方法","延时");window.clearInterval(timeid); 定时执行:var tmid = window.setTimeout("方法名或方法", "延时");window.clearTimeout(tmid); 举例说明: A.当要执行的方法中不需要参数时复制代码代码如下: <scr
JavaScript window.setTimeout() 的详细用法

js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.但是很多javascript新手对setTimeout的用法还是不是很了解.虽然我学习和应用javascript已经两年多了,但是对setTimeout方法,有时候也要查阅资料.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧! setTimeo
JS延迟加载(setTimeout) JS最后加载

第一 JS延迟加载复制代码代码如下: <script language="JavaScript" src="" id="my"></script> <script> setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒 </script> 一般情况下都是利用setT
js函数setTimeout延迟执行的简单介绍

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示: setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout().实例: 复制代码代码如下: function timed
JS中setTimeout()的用法详解

setTimeout setTimeout 语法例子用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTimeout 停止计分及计秒的 counter clearTimeout Set flag 1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTimeOut()停止 1.5 计分及秒的co
JS中Attr的用法详解

具体代码如下所示: <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //使用attr(name)获取属性值: alert(
JavaScript中SetInterval与setTimeout的用法详解

setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止参数描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数
JS、jQuery中select的用法详解

1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&
JS中多种方式创建对象详解

1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function Person(name){ var p=new Object();//内部进行实例化 p.name=name; p.say=function(){ console.log('my name is '+ p.name); } return p;//注:一定要返回 } var girl=Person('
php 中的closure用法详解

Closure,匿名函数,是php5.3的时候引入的,又称为Anonymous functions.字面意思也就是没有定义名字的函数.比如以下代码(文件名是do.php) <?php function A() { return 100; }; function B(Closure $callback) { return $callback(); } $a = B(A()); print_r($a);//输出:Fatal error: Uncaught TypeError: Argument 1
JavaScript知识点总结(十一)之js中的Object类详解

JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1
在Node.js中使用Javascript Generators详解

Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio
关于vue中 $emit的用法详解

1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&
Vue 中mixin 的用法详解

说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

JS中setTimeout()的用法详解

相关推荐

随机推荐