JS(异步与单线程）

JS(异步与单线程）

题目1.同步和异步的区别是什么，试举例（例子见知识点）

区别：

1.同步会阻塞代码执行，而异步不会

2.alert 是同步，setTimeout 是异步

题目2.关于 setTimeout

结果：1 3 5 2 4

题目3.前端使用异步的场景有哪些

 1.定时任务：setTimeout,setInverval

2.网络请求：ajax 请求，动态加载

3.事件绑定

知识点

一、什么是异步

结果：100 300 200

异步结果：100 300（不做等待） 200

同步结果：100 200（等待） 300   （会阻塞后面代码的运行）

对比同步

结果(同步)：100 200（点击确认） 300  

何时需要异步

1.在可能发生等待的情况

2.等待过程中不能像 alert 一样阻塞程序运行

总之，所有的“等待的情况”都需要异步

二、前端使用异步的场景

1.定时任务：setTimeout,setInverval

2.网络请求：ajax 请求，动态加载

ajax 请求示例

结果：

ajax 请求需要等待

 

过程：1.执行第一行，打印  start

          2.执行 $.get 后，函数 data1 会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）

          3.执行最后一行，打印300

          4.待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行

         5.发现暂存起来的 $.get 中的 data1 未执行，待请求 data1.json返回 后，立即执行 data1

 动态加载示例

结果：

不知道图片何时完成加载，需要等待

 3.事件绑定

事件绑定示例

结果：（点击之后才出现 clicked）

 

不知道用户何时点击，需要等待

三、异步和单线程

JS 是单线程的语言，所谓“单线程”就是一根筋，对于拿到的程序，一行一行的执行，直到上面的执行为完成，只能做这一件事

 

输出：100 300 200

这个任务是串行的，不能发生阻塞，使用异步解决这种问题

过程：1.执行第一行，打印100

           2.执行setTimeout 后，传入setTimeout 的函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）

           3.执行最后一行，打印300

           4.待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行

           5.发现暂存起来的 setTimeout 中的函数无需等待时间，立即起来执行

执行程序这样没有问题，但是对于 JS 最初使用的环境 ———— 浏览器客户端 ———— 就不一样了。因此在浏览器端运行的 js ，可能会有大量的网络请求，而一个网络资源啥时候返回，这个时间是不可预估的。这种情况也要傻傻的等着、卡顿着、啥都不做吗？———— 那肯定不行。

因此，JS 对于这种场景就设计了异步 ———— 即，发起一个网络请求，就先不管这边了，先干其他事儿，网络请求啥时候返回结果，到时候再说。这样就能保证一个网页的流程运行。