您现在的位置: 365建站网 > 365学习 > js/javascript中setTimeout()与clearTimeout()用法

js/javascript中setTimeout()与clearTimeout()用法

文章来源:365jz.com     点击数:1603    更新时间:2017-12-27 11:37   参与评论

本文实例分析了js中setTimeout()与clearTimeout()用法,具体分析如下:

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式.

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout.

<input type = text id = aaa >
<input type = button value = stop id = bb onclick = bb()>
<script>
<!--
var iTime
function aa()
{
 aaa.value += "!";
 iTime=setTimeout("aa()",600);
}
function bb()
{
 if (iTime !="")
 clearTimeout(iTime);
}
aa()
-->
</script>
setTimeout的标准语法是: setTimeout(表达式,时间(毫秒)) 两个参数. 



在这里着重记下第一个参数是一个 function时的调用,假设是一个函数. 



1.函数无参: 

function alertV(){ alert("000"); } 



当第一个参数不加引号("" 或 '')时,延迟一秒: 

setTimeout(alertV,1000); 



当第一个参数加上又引号时,延迟一秒: 

setTimeout("alertV()",1000); 





2. 函数有参: 



function alertV(event){ alert("keyCode="+event.keyCode); } 



此时应设置成: 

setTimeout(function(){alertV(event);},1000); 不然会提示参数未定义.

 

setTimeout(function () {
    $("#id").HTML(datastr);
  }, 1000);

jQuery的通过delay实现,例如

$("#id").delay(1000).html(datastr);

 

setTimeout('yourFunction()',5000); 5秒后执行yourFunction(),只执行一次
setInterval('yourFunction()',5000); 每隔5秒执行一次u

如果在yourFunction()中再次调用了setTimeout('yourFunction()',5000),可以完成类似于

setInterval('yourFunction()',5000)的功能
 

     JavaScript定时器工作原理是一个重要的基础知识点。因为定时器在单线程中工作,它们表现出的行为很直观。我们该如何创建和维护定时器呢?要从如下三个函数(都是定义在全局作用域,在浏览器中就是window的方法)说起:

var id=setTimeout(fn,delay);-初始化一个只执行一次的定时器,这个定时器会在指定的时间延迟delay之后调用函数fn,该setTimeout函数返回定时器的唯一id,我们可以通过这个id来取消定时器的执行。

var id=setInvertal(fn,delay);-与setTimeout类似,只是它会以delay为周期,反复调用函数fn,直到我们通过id取消该定时器。

clearInterval(id),clearTimeout(id),;-这两个函数接受定时器的id(例如我们上面提到的两个函数产生的定时器id),并停止对定时器中指定函数的调用。

要深入理解定时器工作原理,我们需要探索一个重要的概念:定时器指定的延迟时间并不能得到保证。在浏览器中,因为所有的javascript代码都运行在单一线程之中,异步事件(如鼠标点击,定时器)只有在他们被触发的时候他们的回调才有机会得以执行。我们可以用下图说明:

       图中包含大量的信息,吸收并理解这些信息,能帮助我们领悟“异步的javascript代码是如何工作的”。这个图是一维的,垂直方向是时间,以毫秒为单位。蓝色的盒子代表正在执行的javascript代码所占时间片段。例如 第一个javascript块执行时间约18ms,第二个鼠标点击块执行了约11ms,其他块类似。

       因为单线程的缘故,在同一时间只能执行一条javascript代码,每一个代码块(蓝色盒子)都会阻塞其他异步事件的执行。这就意味着,当一个异步事件发生的时候(例如鼠标点击,定时器触发,一个XMLHttpRequest 请求完成),它进入了代码的执行队列,执行线程空闲时会依照该执行队列中顺序依次执行代码。(如何将异步事件加入队列,不同浏览器,他们的实现可能有所差异,所以这里我们将其简单化)。

      开始的时候,在Javascript代码块(第一个盒子),初始化了两个定时器,一个10ms延迟的setTimeout 和10ms的setInterval。这些定时器可能会在我们第一个代码块执行结束之前就触发,这取决于定时器在第一个代码块中启动的位置和时间。注意,定时器虽然触发了,但是并不会立即执行,它只是把需要延迟执行的函数加入了执行队列,在线程的某一个可用的时间点,这个函数就能够得到执行。

       当第一个Javascript代码初始化块执行结束,浏览器立即提出一个问题:谁在等待着被执行? 在这个案例中鼠标点击时间的处理程序和一个定时器(setTimeout)都在等待。浏览器选择一个并执行(这里是鼠标点击事件的处理程序)。定时器就需要等待下一个可用时间来执行。

       需要注意的是当鼠标点击事件处理程序执行的时候,第一个interval定时器触发了。和timeout定时器一样,他的回调函数被加入了执行队列,等待执行。然而,还需要注意到当interval定时器再次触发,这个时候timeout定时器的回调函数正在执行,此时这个interval的触发被放弃了。假想(浏览器不这样做),在一个占用时间很多的初始化定时器的代码块中,所有的interval触发都把回调加入执行队列,当初始化代码块结束后,执行队列中已经累加了大量的定时器回调函数,结果就会出现大量的interval回调函数无间隔的执行,直到该执行队列清空。所以浏览器在讲一个interval回调加入执行队列前,会检查执行队列,如果其中存在尚未执行的interval回调那么就等待,直到当前执行队列中没有相应interval的回调以后才会继续入队interval回调。

       事实上,如图,我们看见在第一个Interval的回调执行的时候(之前进入执行队列),第三个interval触发了,这想我们展示一个重要的现象:Interval不关心当前正在执行的代码,他们会不加选择的添加回调到执行队列,尽管这意味着两个interval回调函数执行的时间间隔被牺牲。这里第一个interval回调执行结束后,紧跟着第三个interval的回调马上得到执行,中间没有印象中应该有的10ms间隔。

       最终,在第三个interval的回调执行结束后,我们看见执行队列中没有等待javascript引擎执行的代码,这就意味着,浏览器现在等待新的异步事件的发生,在50ms的刻度处interval再次触发,此时没有什么会阻塞javascript引擎,这个interval回调会立即执行。

让我们看一个例子来阐明,setInterval和setTimeout的不同,

setTimeout(function(){
    /* Some long block of code... */
    setTimeout(arguments.callee, 10);
  }, 10);
 
  setInterval(function(){
    /* Some long block of code... */
  }, 10);

 

看第一眼,会觉得这两段代码功能相同,实际上,他们是不同的。

       需要注意到,setTimeout的回调函数的执行总是保证了至少10ms的间隔(与上一个回调的执行相比,实际执行时,这个间隔可能变长,但是不可能更少),但是setInterval会尝试每隔10ms执行一次回调,不管上一个回调函数时候已经执行完毕。(很多类库的动画都是使用的setTimeout实现)

这里我们学到很多,总结一下:

  • javascript引擎是单线程的,会迫使异步事件进入执行队列,等待执行。

  • setTimeout和setInterval在执行异步代码时从根本上是有所不同的。

  • 如果一个定时器事件被阻塞,使得它不能立即执行,那么它会被延迟,直到下一个可能的时间点,才被执行(这可能比你指定的delay时间要长)

  • Interval的回调有可能‘背靠背’无间隔的执行,这种情况是说interval的回调函数的执行时间比你指定的delay时间还要长

      这些都是构建javascript应用程序非常重要的知识。了解javascript Engine是如何工作的,特别存在大量的异步事件发生,为构建高级应用程序代码打下基础。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (1603人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------