js settimeout用法详解

<body><div id="test">Test Block</div></body></html><script language="JavaScript" type="text/网页特效">for(var i=1;i<=50;i++){ window.setTimeout("printI("+i+")",1000+i*1000); //printI(i);}function printI(i){ document.getElementById('test').innerHTML+=', '+i;}</script>

window.setTimeout(func,delay);

func，代表所要执行的函数或代码字符串。

delay，延时参数，单位为毫秒，一秒＝1000毫秒。

func中传递的函数或语句有变量输入时，变量的取值以延时后的执行时段时的取值为准，不以代码执行时段的值为准。例如：

代码:

for(var i=1;i<=50;i++){ window.setTimeout("document.write(i)",1000);}

这样写的意义是在程序执行完1秒后打印50个i，此时程序已执行完，i的取值为"51";

如果要是程序每隔1秒打印一个数，则程序要改写为

代码:

for(var i=1;i<=50;i++){ window.setTimeout("document.write("+i+")",i*1000);}

有了"+i+"的字符串跳出，每次执行的赋值

1. window.setTimeout("document.write(1)",1000);

2. window.setTimeout("document.write(2)",2000);

3. window.setTimeout("document.write(3)",3000);

4. window.setTimeout("document.write(4)",4000);

5. window.setTimeout("document.write(5)",5000);

...

...

50. window.setTimeout("document.write(50)",50000);

这样实现显示的延时

 

--------------------------------------------------------------------------------

setInterval()这函数跟setTtimeout一样，也是延时执行，不过跟setTimeout()不一样的地方就是，setTimeout执行一次就停止了，而setInterval会一直执行下去...

<html>
<head>
<style>
div { position:relative;
}
</style>

<title>Animating Text</title>
<SCRIPT LANGUAGE="JavaScript" type = "text/javascript">
var pos1 = 0;

function f() {
    pos1 += 5;
    if (pos1 > 640)
       pos1 = 0;
    document.getElementById("movetext").style.left = pos1;
    window.setTimeout("f();",300);
}
</SCRIPT>
</head>
<body onLoad="f();">
<div id="movetext">
<b>inside a div</b>
</div>
</body>
</html>

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 ???游锛??Q, ?是用?碓O定一???r?, ?r?到了, 就??绦幸??指定的 method。?先看以下一????? ?是?]有???用途的例子, 只是用?硎竟? setTimeout( ) 的?法。

　

1.　setTimeout( ) ?法例子
　

??-69　等候三秒才?绦械 alert( )

　　在 第 3 章 ?到 alert ?υ?盒, 一般是用按?叫出?? 在???, 你??吹骄W???⑨ 3 秒, 就???映霈F一?? alert ?υ?盒。

1.　?用?g?器??⑹竟?磁碟中的 timeout1.htm, ??n案有以下?热?

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

<script>
setTimeout("alert('?Σ黄? 要你久候')", 3000 )
</script>

</body> </html>

2.　留意????⑨崛?? 就??霈F一?? alert ?υ?盒。

　

　　setTimeout( ) 是?定一??指定等候?r? (?挝皇乔Х种?幻? millisecond), ?r?到了, ?g?器就??绦幸??指定的 method 或 function, 有以下?法:

 

　　今次例子是?定等 3 秒 (3000 milliseconds), ?g?器就??绦 alert( ) ?一??method。

　

2.　用 setTimeout( ) ??绦 function
　　setTimeout( ) 通常是? function 一起使用, 以下是一???上??????的例子。

??-70　??B列中自?酉?У奈淖?/p>

　　在??-20, 你看?如何用按?在??B列?示文字, 然後再用按?消除文字, 在???, 你看到如何用按?在??B列?示文字, 而?文字??谌?脶嶙?酉?А?/p>

1.　?用?g?器??⑹竟?磁碟中的 timeout2.htm, ??n案有以下?热?

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

<script>
function clearWord( )
{　window.status=""　}
</script>

<form>
<input type="button" value="在??B列?示文字"
　　onClick="window.status='Hello' , setTimeout('clearWord( )', 3000) ">
</form>
</body> </html>

2.　?在按?上按一下, 你???到??B列出? Hello ?字, 留意?了三秒, ?字就???А?/p>

　

1.　??先?定一??名? clearWord( ) 的 function, 作以下定?:

window.status=""

　　?是用?硐???B列的文字 (?看??-20 的?明), ?g?器?绦 clearWord( ) , 就?????B列的文字。

2.　今次按??定了??右韵?身?工作, 用 ， 分隔, ?g?器???序?绦羞@?身?工作:

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

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

 

　　?是?定等 3 秒 (3000 milliseconds) ?g?器就??绦 clearWord( ) ?一??function。

　　在第 2 章, 你看?如何使到父?窗???r自?娱_?⒁??子?窗, 若?看者不???子?窗, ?子?窗就??宦烽_??？催^以上的??, ?你??一????_?⒆右?窗的??, 而?子?窗在??⑨?擅? 就???雨P?。

　

3.　不?嘀匮}?绦械 setTimeout( )
　　setTimeout( ) ??只是?绦幸淮? 但我??可以使用一??循?方式, 使到一??setTimeout( ) 再??幼约阂淮? 就??沟降诙?? setTimeout( ) ?绦? 第二??又??拥谌??, ??友?h下去, ? setTimeout( ) 就????绦小?/p>

　

??-71　自?用棵爰 1 的 function

　　在???, 你看到如何使用 setTimeout( ) 令文字框的?抵得棵刖图 1, ?然你也可以?定其他?增的速度, 例如每五秒就加 5, 或每五秒就加 1。

1.　?用?g?器??⑹竟?磁碟中的 timeout3.htm, ??n案有以下?热?

<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>

<script>
countSecond( )
</script>

</body> </html>

2.　????⑨? ?你留意文字框中的?抵缔D?。

3.　?你?⑦@?n案??去硬碟, 更改一些?定, 例如 x = x+5, 或?⒌群?r?改??000, 看有什?反???/p>

　

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( ) 每秒?绦幸淮巍?/p>

3.　在 JavaScript, 我??是使用???的方法使到一些事?不??绦? 其中一??用途是?示???r?, 另一??用途是?定跑?游淖? ?後的章???欣?印?/p>

　　用上述的方法?定?r?, setTimeout( ) ?然?定了是一秒, 但?g?器?有另外?身?功能要?绦? 所以一??循?的?r?是稍多於一秒, 例如一分?可能只有58 ??循?。

　

4.　?定?l件使 setTimeout( ) 停止
　　setTimeout( ) 的?圈?始後, 就???嘀匮}, 在上????, 你看到文字框的?底植?嗵?? 但我??是有方法使到?底痔?侥骋???抵稻屯Ｏ?? 其中一??方法是用 if...else ?定一???l件, 若是 TRUE 就???绦 setTimeout( ) , 若是 FALSE 就停止。

　　例如要使到上????的 counter 跳到 20 就停下, 可?⒂嘘P的 function 作以下的更改。

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

　

5.　?分及?秒的 counter
　　在前面的??, 相信你已?W?如何使用 setTimeout( ), ?在?你看一?????的例子。

　

??-72　??r的 counter

　　在???, 你要?定???文字框, 一???示分?, 另一???示秒, ????⑨? 就??谶@???文字框中自?佑??r。

1.　?用?g?器??⑹竟?磁碟中的 timeout4.htm, ??n案有以下?热?

<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=lightcyan text=red> <p> </br>

<table> <tr valign=top> <td> 你在本??的???r?是: </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.　?你留意???文字框中的?底洲D?。

　

1.　???有??? function, 一??用?碛?分?, 一??用?碛?秒。在??, ?者只是示?setTimeout( ) 的操作, 因?橛??r器有其他更精?的??法。(留意: ?方式的??r?K不?蚀_。)

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( ) ?硎沟?g?器不??绦幸?? function, ?一?? setTimeout( ) ?始了循?的工作, 我??要使它停下?? 可使用 clearTimeout( ) ? method。

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

　　要使用 clearTimeout( ), 我???定 setTimeout( ) ?r, 要?予? setTimout( ) 一??名?, ?名?就是 timeoutID , 我??叫停?r, 就是用? timeoutID?斫型? ?是一??自?名?, 但很多程式?T就以 timeoutID ?槊??/p>

　　在下面的例子, ?者?定??? timeoutID, 分?e命名? meter1 及 meter2, 如下:

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

　　使用? meter1 及 meter2 ?些 timeoutID 名?, 在?定 clearTimeout( ) ?r, 就可指定?δ囊?? setTimeout( ) 有效, 不??_及另一?? setTimeout( ) 的操作。

 

时间： 2024-11-10 00:15:33

js settimeout用法详解的相关文章

require.js的用法详解_javascript技巧

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></s

JavaScript中SetInterval与setTimeout的用法详解_javascript技巧

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

js replace 与replaceall实例用法详解

这篇文章介绍了js replace 与replaceall实例用法详解,有需要的朋友可以参考一下   stringObj.replace(rgExp, replaceText) 参数 stringObj 必选项.要执行该替换的 String 对象或字符串文字.该字符串不会被 replace 方法修改. rgExp 必选项.为包含正则表达式模式或可用标志的正则表达式对象.也可以是 String 对象或文字.如果 rgExp 不是正则表达式对象,它将被转换为字符串,并进行精确的查找;不要尝试将字符串

javascript jquery-jquery中getScript()的用法详解，从一个远程js文件中读取数据

问题描述 jquery中getScript()的用法详解,从一个远程js文件中读取数据 第一个html文件: <html> <head> <script type="text/javascript" src="jquery-2.1.3.js"></script> $.getScript("shuj.js",function(){alert("aaaaa");}) </hea

js中substr,substring,indexOf,lastIndexOf，split，replace的用法详解_javascript技巧

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索. substring() 方法用于提取字符串中介于两个指定下标之间的字符. substr(start,length)表示从start位置开始,截取length长度的字符串 split 将一个字符串分割为子字符串,然后将结果作为字符串数组返回 replace 用于在字符串中用一些字符替换另一些字符,或替换一个与正则

js判断是否为空和typeof的用法(详解)_javascript技巧

(1)typeof用法 typeof的运算数未定义,返回的就是 "undefined". 运算数为数字 typeof(x) = "number" 字符串 typeof(x) = "string" 布尔值 typeof(x) = "boolean" 对象,数组和null typeof(x) = "object" 函数 typeof(x) = "function" (2)js判断是否为空 v

js中 javascript:void(0) 用法详解_javascript技巧

javascript:void(0)表示不做任何动作.如: 复制代码 代码如下: <a href="javascript:void(0);" onclick="alert('ok');"></a>  这里表示这个链接不做跳转动作,执行onClick事件. 我想使用过ajax的都常见这样的代码: 复制代码 代码如下: <a href="javascript:doTest2();void(0);">here<

JS产生随机数的几个用法详解_javascript技巧

JS产生随机数的几个用法详解 <script> function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } var num = GetRandomNum(1,10); alert(num); </script> var chars = ['0','1','2','3','4','5','6','7

JS、jQuery中select的用法详解_javascript技巧

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")); "文本",&