JS定时延时执行代码的功能就是定时器,主要是setTimeout()和setInterval(),它们都是windows的全局属性。
setTimeout
setTimeout(作用目标,延时时间)
setTimeout(function(){
console.log('haha')
},1000) //1000毫秒
执行效果如图
在控制台返回的蓝色的数字是什么?它好比是这次延时命令的代号或者身份id,延时器这个对象的编号。用编号可以找到这个延时器,并处理。
有什么用呢?延时时,突然不想操作了,就及时制止。
和setTimeout对应的是clearTimeout(定时器的编号)
clearTimeout(191)取消编号为191的定时器。
clearTimeout(timer) //取消了上面例子的定时器了
setInterval
不是延时,是间隔执行,每隔多少时间执行,,,
var i =0
var timer = setInterval(function(){
console.log(i++)
},1000) //0,1,2,3,4,5,6,7,,,,,,
clearInterval(timer) //停止
setInterval(function(){
console.log( new Date())
},1000) //类似时钟的效果
如图
单线程模型
在逻辑上浏览器处理页面处理代码,处理所有的事件,都是单线程的,为了简单,免得同时做事情有矛盾。
单线程解析代码,一个接一个去执行,正常情况下,代码都是同步的代码,从前往后一行行去执行,但有时候会遇到问题,比如这时候,JS会向服务器要数据,这时候,可以用ajax向服务器发请求,那发请求需要时间,接收也需要时间,这中间是不是等待啊,什么都做不了,动不了,卡屏啊之类的。
这时候就用异步。我们有些代码,代码里有些方法之类的,正常情况下代码放在栈中,要做一个事情,就放这里面,再做一个事情,放在这里面,正常执行是一个个执行。但有些事情,绑定了事件,发了请求,还有其他异步处理,这时候,绑定事件的代码就不放在栈中了,放到任务队列里了,等栈里所有代码都完成执行后,任务队列里的代码才开始执行。
关键是setTimeout,setInterval也是异步机制,将指定代码移出本次执行,等到下一轮事件循环过程中,再检查是否到了执行时间。如果到了就执行,如果不到就再下一轮事件循环。事件循环就是在任务队列里的所有排队的一个一个循环执行。通过一些例子来看看:
setTimeout(function(){
console.log(1)
},0)
console.log(2)
// 2然后才是1
setTimeout(function(){
console.log(1)
isOk=false
},1000)
var isOk= true
while(isOk){
console.log(2)
} //无限循环,因为setTimeout直接是异步,放到任务序列了,需要等while先执行完,才执行,结果while一直为真了。
只要是setTimeout还是setInterval都要直接放任务序列里,等其他的同步执行了,再轮到它们。
var i =0
for(var i=0;i<10;i++){
setTimeout(function(){
console.log(i)
},1000)
} //输出10次10.for循环是同步的会执行,执行完成后i=10,一秒后才执行那段代码,相当于创建了10个定时器。
解读下这个延迟时间,要明白浏览器操作是需要时间的,操作每一步也是需要时间的,还有顺序一说,所以,设定的时间只能是一个尽量遵从的标准了。
最小时间间隔是4到十几毫秒之间。
网友评论