欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jscript定时器,一直用的东西,你真的明白吗?

程序员文章站 2022-07-26 18:27:05
JavaScript定时器 JavaScript是一种解释型语言(边编译边执行),Js解析顺序是从上到下,然后将编译后的任务丢到一个事件队列中,然后事件内的函数会从上到下开始执行 setInterval setInterval(fn,t); fn是间隔t毫秒后执行的代码块 每隔t就执行fn直到你清除 ......

JavaScript定时器

JavaScript是一种解释型语言(边编译边执行),Js解析顺序是从上到下,然后将编译后的任务丢到一个事件队列中,然后事件内的函数会从上到下开始执行

jscript定时器,一直用的东西,你真的明白吗?

 

setInterval

setInterval(fn,t); fn是间隔t毫秒后执行的代码块

每隔t就执行fn直到你清除定时器

当js引擎读取到一个setInterval语句的时候就会往浏览器定时触发器中丢一个任务,然后定时 触发器每隔t毫秒就往当前任务队列中丢一个任务,任务内容为fn中的代码块(有图有真相)

jscript定时器,一直用的东西,你真的明白吗?

 

 

var startTime=new Date();
setInterval(function(){
console.log((new Date()-startTime)+"毫秒");
},1000);

 jscript定时器,一直用的东西,你真的明白吗?

可以看到每次都差不多1000毫秒。

 

setTimeout

setTimeout(fn,t);延迟t毫秒之后执行fn,区别就是这个只执行一次

jscript定时器,一直用的东西,你真的明白吗?

 

 

 var startTime=new Date();
setTimeout(function(){
console.log((new Date()-startTime)+"毫秒");
},1000);

jscript定时器,一直用的东西,你真的明白吗?

看到这里细心的人会发现异步这个词

定时器是异步的

给大家举个例子

var fn=function(){

console.log(123);

}

setTimeout(fn,1000);

console.log(567);

jscript定时器,一直用的东西,你真的明白吗?

没想到吧?567是先执行的。为什么fn里面的代码不是等1000毫秒执行完之后输出123,再输出567呢

就是因为定时器是异步的,js解析到定时器的时候,会把定时器扔到定时触发器,当延迟1000毫秒之

后,再扔到当前任务队列里面执行。在这个延迟的过程中,任务队列里面的代码依然会执行,不会说

等你定时器执行了之后,我在执行!如果是等你执行完我在执行,那效率太 slow baby了

 

而且使用的时候不要太过于依赖定时器设置好的定时器时间,延迟的时间严格意义上来说总是大于t的,至于大多少,就要看当时js的执行情况了。

seTimeout注册的函数会把任务丢给定时触发器线程,而定时触发器一旦到了延迟的时间就会将fn加入主进程执行队列。但是如果当前任务队列还有没执行完的代码,而又需要等待当前任务执行完毕才能执行

到fn,所以实际的延迟会比设置的时间要长。如果你在fn之前设置一个大大大循环,那你等吧。。啊哈哈哈哈

jscript定时器,一直用的东西,你真的明白吗?

 

 

 jscript定时器,一直用的东西,你真的明白吗?

 

清除定时器,如果不清除定时器的话,会不断往当前任务列表里面添加任务执行,会把任务列表给整乱

代码执行顺序了 时间了 误差就大了  你的页面也就GG了所以用完要清除的。

timer =setInterval(fn,t);

clearInterval(timer);

同理

 

看完了 应该都能明白吧 看完给个赞呗  !!!