1. console.log('111');
  2. setTimeout(()=>{
  3. console.log('222')
  4. },1000);
  5. console.log('333');
  6. setTimeout(()=>{
  7. console.log('444')
  8. },0);
  9. console.log(555);

就是执行这样一段js代码 , 打印出来的结果是 :

111 -> 333 -> 555 -> 444 -> 222

(结果就是我们理论起来 setTimeout 到底是同步还是异步的 ?为什么会这样执行 ? JavaScript不是一门单线程的语言吗?)

了解setTimeout 与 clearTimeout
setTimeout 接受两个参数,第一个是包含js代码的字符串和函数,第二个参数是等待多长时间的毫秒数,但经过该事件指定的代码不一定执行(下面讲解缘由)。clearTimeout 接受一个setTimeout 返回的id 值作为参数传递给它,取消代码的执行。

  1. //设置超时调用
  2. var timeoutId = setTimeout(function (){
  3. alert("hello World");
  4. },1000);
  5. //取消掉用的代码
  6. clearTimeout(timeoutId);

JavaScript中没有任何代码是立即执行的,但是只用进程一旦空闲就会立即执行,所以题目中设置的事件不过是经过多少毫秒数被添加到了队列中,而不是经过多少时间后就被执行
在这里,我们需要有一点进程,线程的知识来支撑我们理解js中同步,异步的编程思想
众所周知,javascript是一门单线程的语言,即在js引擎中负责解释和执行js代码的线程只能有一个,但是,我们知道浏览器是多线程的。html5中提出了新的web标准,允许javascript 脚本创建多个线程,但子线程完全受主线程控制,且不得进行Dom操作,因此也并没有改变单线程的本质。
同步异步的理解
同步:假如一个函数返回时,调用者就能够得到预期结果(拿到了预期的返回值或者看到了预期的效果),这就是同步函数。

  1. alert("hello World");
  2. console.log("hello World");

异步:调用一个函数,返回的值不是预期的结果,需要通过一定的手段才能得到预期的返回值,这就是异步函数

  1. var timeoutId = setTimeout(function (){
  2. alert("hello World");
  3. },1000)

异步执行的过程:
主线程发起一个异步请求,相应的工作线程(比如浏览器的其他线程)接收请求并告知主线程已收到(异步函数返回);主线程可以继续执行后面的代码,同时工作线程执行异步任务;工作线程完成工作后,通知主线程;主线程收到通知后,执行一定的动作(调用回调函数)。(工作线程将消息放到消息队列中,主线程通过时间循环去逐个取信息,)

发起函数 – 发起异步过程
回调函数 – 返回处理结果
事件循环的机制
主线程只会做一件事,就是从消息队列里面取消息、执行消息。当消息队列为空时,就会等待消息队列变成非空。只有当前的消息执行结束,才会去取下一个消息。这种机制就叫做事件循环机制Event Loop,取一个消息并执行的过程叫做一次循环。
setTimeout 函数的解决
在了解了以上的知识点后,我们就能够对setTimeout 函数有很好的理解,在执行我们本页开始的代码的时候,先在控制台输出 one ,然后主线程发起异步请求,工作线程接受请求,将setTimeout 经过设置的时间数推入消息队列,最终通过事件循环取出消息进行调用,这就是我们刚才开始看到结果的原因了。

setTimeout 到底是同步还是异步的 ?
除了放置异步任务的事件,"任务队列"还可以放置定时事件。

setTimeout()接受两个参数,第一个是回调函数,第二个是推迟执行的毫秒数。

需要注意的是,setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。

综上所属

setTimeout是单线程,类似异步,但不是异步 。

setTimeout、同步、异步的理解的更多相关文章

  1. 关于vue生命周期中的同步异步的理解

    在vue官网中介绍生命周期的图如下: 主要测试代码如下: 主要是测试前四个生命周期beforeCreate,created,beforeMount,mounted,里面同步和异步的执行顺序,其它的类似 ...

  2. java 关于同步异步的理解

    经常看到介绍 ArrayList 和HashMap是异步,Vector和HashTable是同步,这里同步是线程安全的,异步不是线程安全的,举例说明: 当创建一个Vector对象时候, Vector ...

  3. AJAX中的请求方式以及同步异步的区别

    AJAX中的请求方式以及同步异步的区别请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用wind ...

  4. Java中线程同步的理解 - 其实应该叫做Java线程排队

    Java中线程同步的理解 我们可以在计算机上运行各种计算机软件程序.每一个运行的程序可能包括多个独立运行的线程(Thread). 线程(Thread)是一份独立运行的程序,有自己专用的运行栈.线程有可 ...

  5. jquery ajax 同步异步的执行

    jquery ajax 同步异步的执行   大家先看一段简单的jquery ajax 返回值的js 代码 function getReturnAjax{  $.ajax({    type:" ...

  6. java中线程同步的理解(非常通俗易懂)

    转载至:https://blog.csdn.net/u012179540/article/details/40685207 Java中线程同步的理解 我们可以在计算机上运行各种计算机软件程序.每一个运 ...

  7. js中对同步和异步的理解

    你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流 ...

  8. JS中同步与异步的理解

    你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流 ...

  9. Netty基础系列(2) --彻底理解阻塞非阻塞与同步异步的区别

    引言 在进行I/O学习的时候,阻塞和非阻塞,同步和异步这几个概念常常被提及,但是很多人对这几个概念一直很模糊.要想学好Netty,这几个概念必须要掌握清楚. 同步和异步 同步与异步的区别在于,异步基于 ...

随机推荐

  1. NMOS和PMOS区别

    在很多电路途中会出现NMOS和PMOS管,因为不是中文那么直接,都说管压降之类的,但其实它的导通很重要以及区别,关系到你点亮电子元件> 参考: 1.https://blog.csdn.net/l ...

  2. 头文件.h的作用

    参考链接http://www.cnblogs.com/webcyz/archive/2012/09/16/2688035.html懒得复制过来

  3. 利用TfidfVectorizer进行中文文本分类(数据集是复旦中文语料)

    1.对语料进行分析 基本目录如下: 其中train存放的是训练集,answer存放的是测试集,具体看下train中的文件: 下面有20个文件夹,对应着20个类,我们继续看下其中的文件,以C3-Art为 ...

  4. 超级简单的照片画廊MVC

    下载Gallery.zip - 23.5 MB 介绍 我想在我的个人网站上添加一个简单的图片库,但找不到任何合适的方法来从文件夹而不是数据库中挑选图片.也许我应该看得更仔细些!尽管如此,下面是我实现的 ...

  5. 推荐Java字节码解析工具classpy

    Classpy Classpy is a GUI tool for investigating Java class file, Lua binary chunk, Wasm binary code, ...

  6. Python操作图像

    安装Pillow pip install Pillow 打开图像 from PIL import Image img = Image.open("./lena.tiff") 保存图 ...

  7. 强大的table组件-antd pro table

    概述 antd pro table antd pro table 的主要部分 表格显示的配置(绿色框内) 检索的配置(红色框内) 是否显示检索部分 检索的内容是如何生效的 工具栏的配置(黄色框内) 表 ...

  8. uc浏览器手机版,页面图片不显示

    uc浏览器手机版,有时候上面的轮播广告看不到 原因:uc浏览器会拦截所有带ad的标签 例如: <div id="adDiv"> <img src="/r ...

  9. day53 Pyhton 前端04

    内容回顾: 盒子: 内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加 外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值 边框:border border-c ...

  10. day26 Pyhton select功能语句实现

    一.查询语句功能实现 select id,name where age > '20' name_value = {'id':0,'name':1,'age':2,'phone':3,'job': ...