`

javaScript之setTimeOut()

阅读更多

在使用 setTimeout 時,假設要執行 4 次就如同下面的例子:

for (var i = 0; i < 4; i++)
  {
      console.log("A="+i);
      function A(){
          console.log("B="+i);
      }
      window.setTimeout(A, 0);

  }

一般常理判斷結果應該是:
A=0
B=0
A=1
B=1
A=2
B=2
A=3
B=3

實際結果如下:
A=0
A=1
A=2
A=3
B=4
B=4
B=4
B=4

有沒有覺得很奇怪?

這是因為 javascript 屬於單執行序,看起來 window.setTimeout(A, 0); 似乎是馬上執行,但是實際上, for 迴圈裡的 setTimeout 會先放在代執行的堆疊裡,直到 for 迴圈結束,但如此一來到結束時,i 即為 4,所以結果就是堆疊裡的每個待執行任務中的 i 都為 4。

所以比較好的寫法應該是:
<html>
        <head>           
            <script style='javascript' src=''></script>            
        </head>
    <body >


        <script type="text/javascript">
          var i = 0;
          function doAppend(){
              if (i++ >= 4){
                  return;
              }
              console.log("B="+i);
              setTimeout(doAppend, 0);
          }//函数定义。只是定义,没有执行。
          console.log(i);//i=0
          setTimeout(doAppend, 0);//开始执行
         
        </script>
    </body>
</html>


跟上面的例子有什麼不同?上面的 setTimeout 每個是獨立的,這個例子的 setTimeout 將 一環接著一環,如此一來,每個 setTimeout 都會有正確的 i 了


-

另外一旦我們想要清除定時器,可以通過將定時時產生的ID標識傳遞給clearTimeout或者clearInterval函數來清除定時,至於使用哪個函數取決於調用的時候使用的是setTimeout還是setInterval。範例如下:
var id = setTimeout ( foo ,  1000 ); 
clearTimeout ( id );

假設我們要清除所有定時器,但由於沒有內置的清除所有定時器的方法,可以採用一種暴力的方式來達到這一目的。
//清空"所有"的定時器
for ( var i =  1 ; i <  1000 ; i ++)  { 
    clearTimeout ( i ); 
}

可能還有些定時器不會在上面代碼中被清除(如果定時器調用時返回的ID值大於1000),因此我們可以事先保存所有的定時器ID,然後一把清除。











ref:
1、Javascript: setTimeout
http://smlsun.com/blog/2013/02/01/javascript-settimeout/

2、JavaScript可否多線程? 深入理解JavaScript定時機制
http://www.phpv.net/html/1700.html








-








分享到:
评论

相关推荐

    javascript之setTimeOut和setInterval的用法

    使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。

    Javascript中, setTimeout() 和 setInterval() 的方法

    在JavaScript编程中,`setTimeout()`和`setInterval()`是两个非常关键的函数,它们用于实现异步编程,特别是在处理动画、定时任务或者延迟执行代码时不可或缺。这两个函数都是全局对象`window`的方法,它们的区别...

    JavaScript中setTimeout的那些事儿

    其中,setTimeout是JavaScript提供的一个非常重要的定时执行函数,它允许开发者设定代码在未来的某个时间点执行。尽管JavaScript是单线程的,但是通过setTimeout等机制,JavaScript能够实现非阻塞的异步编程模型。...

    Javascript中setTimeOut和setInterval的定时器用法

    Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...

    JavaScript中setTimeout和setInterval函数的传参及调用_.docx

    JavaScript 中 setTimeout 和 setInterval 函数的传参及调用 在 JavaScript 中,setTimeout 和 setInterval 函数都是用于在指定的时间点执行某个函数的,但是它们的传参方式和调用方式却有所不同。 setTimeout ...

    JavaScript中SetInterval与setTimeout的用法详解

    必需,要调用的函数后要执行的 JavaScript 代码串。 millisec 必需,在执行代码前需等待的毫秒数。 setTimeinterval setInterval(code,millisec[,”lang”]) 参数 描述 code 必需,要调用的函数或要...

    【JavaScript源代码】JavaScript使用setTimeout实现倒计时效果.docx

    本文将详细介绍如何使用JavaScript的`setTimeout`函数实现倒计时效果。 `setTimeout`是JavaScript中的一个定时器函数,它可以指定一个函数在多少毫秒后执行一次。在倒计时应用中,我们利用`setTimeout`来定期更新...

    Javascript定时器(二)——setTimeout与setInterval

    在这个主题中,我们将深入探讨`setTimeout`和`setInterval`这两个核心定时器函数,它们在JavaScript中的应用以及它们之间的区别。 首先,`setTimeout`函数用于在指定的毫秒数后调用一个函数或执行一段代码。它的...

    JavaScript_window.setTimeout()_的详细用法

    ### JavaScript中的`window.setTimeout()`详解 #### 一、概述 在JavaScript编程中,`window.setTimeout()`函数是一个非常重要的异步编程工具,它允许开发者在指定的时间后执行特定的代码片段。这一特性对于实现...

    Javascript定时器 三 setTimeout func 0

    本篇文章主要探讨`setTimeout(func, 0)`这一特定用法,它在JavaScript中的作用和实际应用场景。 `setTimeout`函数是JavaScript提供的一个全局方法,用于在指定的毫秒数后调用一个函数或执行一段代码。它的基本语法...

    JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

    总结来说,`setTimeout`和`setInterval`是JavaScript中用于延迟和周期性执行代码的关键方法。`setTimeout`适用于单次延迟执行,而`setInterval`则用于重复执行,但需要注意其可能产生的执行延迟问题。在实际开发中,...

    JavaScript基于setTimeout实现计数的方法

    JavaScript是一种广泛使用的前端脚本语言,而setTimeout是JavaScript中用于实现定时器功能的一个重要函数。在Web开发中,setTimeout通常用来推迟某个函数的执行,直到指定的时间之后才进行调用。本文将介绍如何使用...

    javascript中setTimeout使用指南

    javascript中setTimeout使用指南 [removed] /* //方法1 function slows(){ alert&#40;"15S后弹出!"&#41;; } setTimeout("slows()",5000); //方法2 function slows(){ alert&#40;"15S后弹出!"&#41;; } ...

    javascript setTimeout()函数.rar

    javascript setTimeout()函数的三种使用方法,刷新页面的源代码 [removed] function myrefresh(){ [removed].reload(); } setTimeout('myrefresh()',20000); //指定1秒刷新一次 [removed]

    让JavaScript中setTimeout支持链式操作的方法

    JavaScript是目前广泛使用的前端脚本语言之一,它在页面交互方面扮演着重要角色。在JavaScript中,setTimeout是常用的异步操作函数,用于设置一个定时器,该定时器在指定的毫秒数后执行一个函数。然而,由于...

    JavaScript定时器:`setTimeout`和`setInterval`的深入指南

    setTimeout和setInterval是JavaScript中两个基本的定时器函数,它们在前端开发中有着广泛的应用。本文将详细介绍这两个函数的使用方法、差异、以及如何在实际项目中有效利用它们。 setTimeout和setInterval是...

    javascript中setTimeout的问题解决方法

    主要介绍了javascript中setTimeout的问题以及对应的解决方法,需要的朋友可以参考下

    JavaScript通过setTimeout实时显示当前时间的方法

    除了setTimeout外,JavaScript还有一个与之相对应的setInterval函数。与setTimeout不同的是,setInterval用于重复执行函数或代码块,直到使用clearInterval取消。在实时显示时间的场景中,setTimeout和setInterval都...

    setTimeout应用(模拟站长之家导航)

    在JavaScript编程中,`setTimeout`是一个非常重要的函数,它用于在指定的时间(以毫秒为单位)后调用一个函数或者执行某段代码。在这个场景中,标题提到的"setTimeout应用(模拟站长之家导航)"可能是指利用`...

Global site tag (gtag.js) - Google Analytics