javascript异步处理工作机制详细解决方案
var id = setTimeout(fn,延迟);-初始化一个计时器,然后执行一个指定的时间间隔后,这个函数返回一个唯一的标志,身份证(号码),我们可以用它来取消计时器。
var id = setInterval(FN,延迟);-有点类似setTimeout,但它是一个函数的连续调用(间隔时间延迟参数)直到它被取消。
ClearInterval(ID);,清除定时器(ID);-使用定时器的ID(的setTimeout和setInterval的返回值)取消定时器回调发生
为了理解计时器的内在原理,需要讨论一个重要的概念:计时器(延迟)的延迟不能保证,因为所有Javascript代码都是在线程中执行的,所有的异步事件,如鼠标单击和计时器,只有在执行机会时才执行。
这张图表中有许多信息需要理解。如果你完全理解它们,你会有很好的了解Javascript引擎实现异步的事件。这是一个一维的图标:垂直方向上显示的时间,和蓝色块代表Javascript代码执行块。例如,第一个Javascript代码执行块需要大约18ms,和执行代码块鼠标点击触发需要11ms,等等。
因为Javascript引擎每次只执行一个代码,这是由于Javascript单线程的性质,每一个Javascript代码执行块中其他的异步事件的执行。这意味着当一个异步事件(例如,鼠标点击,定时器触发,或Ajax异步请求)这些事件的回调函数后将排在最后的队列中等待执行(事实上,排队的方式不同,这取决于您的浏览器,这是一个简化的);
从第一个Javascript执行块,在第一个执行块,两个定时器初始化:一个10ms的setTimeout()和一个10 setInterval()。根据时,定时器的初始化(后定时器初始化完成),定时器会触发前的第一块被执行。然而,功能结合定时器不会立即执行(Javascript是单线程的理由不立即执行)。事实上,延迟函数将在执行队列的最后放置在转,等待下一个合适的时间再执行。
此外,我们看到在第一个Javascript执行块的鼠标单击事件。Javascript回调函数绑定在这个异步事件(我们不知道用户(点击)这一事件的实现,所以它是异步的),这个函数不会被立即执行,和上面的计时器,它会在执行队列的最后,等待下一次的执行。
当第一个Javascript执行块完成时,浏览器将立即询问一个问题:哪个函数(语句)正在等待执行在这一点上,鼠标点击事件处理函数和定时器的回调函数都在等着被处决。浏览器将选择一个处理函数,实际上选择的鼠标单击事件是因为它被称为图的先进团队,并立即执行。定时器的回调函数将等待下一个合适的执行时间。
注意当鼠标点击事件处理函数执行的setInterval回调函数触发第一次。像setTimeout回调函数,它最终将在执行队列的最后,等待执行。然而,我们必须注意这一点:当setInterval回调函数引发第二次,当setTimeout函数仍然是执行的setInterval第一个触发器将被遗弃。当一个代码块执行的时候,可能回调函数setInterval在执行队列的后排,然后代码块被执行,其结果将是一个列表的执行setInterval回调函数,这些函数之间有没有间隔因此,当排队时没有更多的间隔处理功能时,浏览器倾向于在队列中放置下一个处理函数,这是由于间距问题造成的。
我们可以发现,以往的setInterval回调函数仍然是第三setInterval回调函数执行时触发。这说明setInterval不会考虑什么是当前正在执行的一个很重要的事实,并把队列的末尾都封锁的功能。这意味着两个setInterval回调函数之间的时间区间将被牺牲(减少)。
最后,当第二setInterval回调函数的执行,我们可以看到,没有程序等待Javascript引擎执行。这意味着浏览器正在等待一个新的异步事件发生。在50ms,setInterval回调函数是一个新的再次触发,当没有执行块中执行。因此将立即执行。
让我们用一个例子来说明setTimeout和setInterval的区别:
setTimeout(){()函数(
一些长代码块…
setTimeout(参数。被叫方,10);
},10);
setInterval(){()函数(
一些长代码块…
},10);
两行代码不不同,乍看之下,但他们是不同的。的setTimeout回调函数的执行和最后的执行之间的间隔至少为10ms(可能更多,但不小于10ms),而setInterval回调函数将尝试执行每10ms一次,不管执行完最后一次。
在这里我们学到了很多知识,总结一下:
Javascript引擎是一个单独的线程,强制所有异步事件等待执行。
setTimeout和setInterval在执行异步代码的根本区别
如果计时器被阻塞,不能立即执行,则它将延迟执行,直到执行下一个可能的执行时间(比预期的时间间隔长)。
如果setInterval回调函数的执行时间足够长(比指定的时间间隔较长),他们将执行连续和他们之间没有时间间隔。
以上是本文的全部内容,希望对您学习Javascript异步处理有一定的帮助。