|
setTimeout( ) 是属于 window 的 方法, 但我们都是略去 window 这顶层容器名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method 请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 setTimeout( ) 的语法。 1、setTimeout( ) 语法例子 <html><body text=red><h1> <font color=blue> 示范网页 </font> </h1> <p> </br><p> 请等三秒钟!<script>setTimeout("alert('对不起, 三秒钟已到')", 3000 )</script></body> </html>2. 留意网页开启后三秒, 就会出现一个 alert 对话盒。 setTimeout( )是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function, 有以下语法: setTimeout(code, milliseconds, param1, param2, ...)setTimeout(function, milliseconds, param1, param2, ...) code/function:必需。要调用一个代码串，也可以是一个函数。 milliseconds:可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。 param1, param2, ... : 可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。 这次例子是设定等待 3 秒 (3000 milliseconds), 浏览器就会执行 alert( ) 这一个method，注意这个函数可以由我们自己重新书写。下面就来看一看调用function的方式 <html><head></head><body text="red"><h1><font color="blue"> 示范网页 </font></h1><script>// setTimeout("alert('出窗')",3000 );setTimeout("changeState()",3000 );function changeState(){// alert("弹出");let content=document.getElementById('content');content.innerHTML="<div>这是三秒钟之后</div>";}</script><p id="content"> 请等三秒钟!</p></body></html>以上这段代码是实现一个在3秒钟之后进行更换文本的内容，在更换内容的时候调用了方法changeState()方法 3、有了以上基础，我们可以实现一个自动运行的按照时间递加的计数器，如下面所示代码： <html><body text=red><h1><font color=blue> 示范网页 </font></h1><script>var x=0;function changeState(){x=x+1;//注意这里的调用方式，使用引号包围setTimeout("changeState()",1000 );let content=document.getElementById('content');content.innerHTML=x;console.log(x);}</script><button onclick="changeState()">开始计时</button><p>已运行时间</p><p id="content"></p></body></html>
虽然实现了数值的递增，但是当我们连续点击按钮时，你会发现，数值的增加不是按照1秒增加的（小于1秒），下面，我们进行一些限制条件，比如限制x<60,然后重新开始，在其他位进1，也就是实现钟表计时功能，如下面代码： <html><body text=red><h1><font color=blue> 示范网页 </font></h1><script>var x=00;var y=00;var z=00;function changeState(){if(x<=59&&x>=0 && y<=59 && y>=0 && z<=59 && z>=0){//注意这里的调用方式，使用引号包围let content=document.getElementById('content');content.innerHTML=z+":"+y+":"+x;console.log(x);x=x+1;}else if(y<=59 && y>=0 && z<=59 && z>=0){y=y+1;x=0;}else if (z<=59 && z>=0) {z=z+1;y=0;x=0;}setTimeout("changeState()",1000 );}</script><button onclick="changeState()">开始计时</button><p>已运行时间</p><p id="content"></p></body></html>
3、既然有开始计时，那么想当然就要有停止计时，那么就需要知道这个函数------clearTimeout( ) setTimeout( ) 来使到浏览器不断执行一个 function, 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这 method。 如下所示，停止的语句（注意：count1(),count2()分别是计时开始的方法，而meter1,meter2分别是setTimeout的定义） <html><head><script>x = 0y = 0function 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 /> </p><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> </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>4、设置点击一次标志--- Set flag <html><head><script>x = 0flag = 0function count( ){ x = x+ 1 document.display.box.value= x timeoutID=setTimeout("count()", 1000) flag = 1}function restart( ){ if (flag==0) { count( ) }}</script></head><body bgcolor="lightcyantext=red"><p> <br /> </p><form name="display"><input type="text" name="box" value="0" size="4" /><input type="button" value="停止计时" onclick="clearTimeout(timeoutID);flag=0" /><input type="button" value="继续计时" onclick="restart() " /></form><p> <script>count( )</script> </p><form><input type="button" value="Show flag" onclick="alert('The flag now is '+ flag)" /></form></body></html>效果说明： 1. 在网页中, 你应该能看到三个按钮及文字框中的数字跳动。 代码解析： 1. 这网页第 5行有这一句: flag=0 , 这是设定 flag 这变量及将初始值定为 0, 你也可将初始值定为 1, 随后有关的 0 和 1 对调。 function restart( ){ if (flag==0) { count( ) }} 这里的 if statement 检查 flag是否等于 0, 若是 0 就启动 count(), 若是 1 (即不是 0) 就没有反应,使用这方法, 若 count( )已在执行中, [继续计时] 这按钮不会有作用。 onClick="clearTimeout(timeoutID);flag=0" 上面代码是停止 setTimeout( ) 的操作时,同时将 flag 传回 0, 这使到restart( ) 这function 可以重新启动 count()。 注意:下面方法是定时作用,能够按照一定的时间执行相同的操作setInterval let i =0; setInterval(() => { console.log(i++); },1500);//1000为1秒钟在上面代码中,每隔1.5秒就会有一次打印,对于这个方法,同样能够实现上面操作中的始终功能,并且代码更加简单. 应该值得注意的是: setTimeout 也有个小细节，第二个参数设置为 0 也许会有人认为这样就不是异步了，其实还是异步。这是因为 HTML5 标准规定这个函数第二个参数不得小于 4 毫秒，不足会自动增加。 |
|
|
