美文网首页
setTimeout用法

setTimeout用法

作者: 流着万条永远的河 | 来源:发表于2017-09-22 18:53 被阅读0次

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到十几毫秒之间。

相关文章

  • 记一次UC的面试

    1. setTimeout setInterval setImmediate setTimeout定义与用法:...

  • 定时器

    setTimeout和clearTimeout基本用法 setInterval和clearInterval基本用法...

  • JavaScript基础 定时器

    setTimeout() 定时只执行一次 用法:setTimeout( x , 1000 ); ===> 100...

  • setTimeout用法

    JS定时延时执行代码的功能就是定时器,主要是setTimeout()和setInterval(),它们都是wind...

  • setTimeout用法

    定时器 JavaScript提供定时执行代码的功能叫做定时器(timer),主要有SetTimeout()和set...

  • 2018-04-02播放伴奏问题

    播放原唱函数 开始录音绑定函数 setTimeout的用法 setTimeout(函数名,时间,函数的参数1,函数...

  • 22_setTimeout和setInterval的运行机制了解

    一、setTimeout() 1、基本用法 setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后...

  • setTimeOut的用法

    输出的结果:4,4,4 输出的结果:1,2,3

  • setTimeout用法简介

    setTimeout运行原理 先观察以下代码 上述代码的结果是: 以上结果表明几个现象: 1.定时任务在非定时任务...

  • js setTimeout 中传递参数

    记录一下使用setTimeout犯的错误 正确用法

网友评论

      本文标题:setTimeout用法

      本文链接:https://www.haomeiwen.com/subject/isbfextx.html