|
17 | 17 | * [02-03](https://github.com/TYRMars/JSlearn#02-03) `作用域和闭包-作用域` |
18 | 18 | * [02-04](https://github.com/TYRMars/JSlearn#02-04) `作用域和闭包-闭包` |
19 | 19 | * [02-05](https://github.com/TYRMars/JSlearn#02-05) `知识点小结 & 解决问题` |
| 20 | +#### 03 |
| 21 | +* [03-01](https://github.com/TYRMars/JSlearn#03-01) `异步和单线程-什么是异步` |
| 22 | +* [03-02](https://github.com/TYRMars/JSlearn#03-02) `异步和单线程-单线程` |
| 23 | +* [03-03](https://github.com/TYRMars/JSlearn#03-03) `其他知识点-日期和Math` |
| 24 | +* [03-04](https://github.com/TYRMars/JSlearn#03-04) `其他知识点-数组和对象的API` |
| 25 | + |
20 | 26 |
|
21 | 27 |
|
22 | 28 | ## JS小练习 |
@@ -659,6 +665,69 @@ firstLoad(10) // true |
659 | 665 | firstLoad(10) // false; |
660 | 666 | firstLoad(20) // true |
661 | 667 | ``` |
| 668 | +## 03-01 |
| 669 | +### 异步和单线程-什么是异步 |
| 670 | +* 同步和异步的区别是什么?分别举一个同步和异步的例子 |
| 671 | +* 一个关于setTimeout的笔试题 |
| 672 | +* 前端使用异步的场景有哪些 |
| 673 | +#### 异步知识点 |
| 674 | +* 什么是异步(对比同步) |
| 675 | +* 前端使用异步的场景 |
| 676 | +* 异步与单线程 |
| 677 | +#### 什么是异步 |
| 678 | +```JavaScript |
| 679 | +console.log(100); // step1 |
| 680 | +setTimeout(function () { |
| 681 | + console.log(200); // step3 |
| 682 | +},1000); |
| 683 | +console.log(300); // step2 |
| 684 | +``` |
| 685 | +#### 对比同步 |
| 686 | +```JavaScript |
| 687 | +console.log(100); |
| 688 | +alert(200) // 1秒钟后点击确认 |
| 689 | +console.log(300); |
| 690 | +``` |
| 691 | +#### 何时需要异步 |
| 692 | +* 在可能发生等待的情况 |
| 693 | +* 等待过程中不能像alert一样阻塞程序运行 |
| 694 | +* 因此,所有的`所有的等待情况`都需要异步 |
| 695 | +#### 前端使用异步的场景 |
| 696 | +* 定时任务:`setTimeout,setInverval` |
| 697 | +* 网络请求:`ajax请求`,`动态<img>加载` |
| 698 | +```JavaScript |
| 699 | +//ajax请求 |
| 700 | +console.log('start'); |
| 701 | +$.get('./data1.json',function (data1) { |
| 702 | + console.log(data1); |
| 703 | +}) |
| 704 | +console.log('end'); |
| 705 | +//<img>加载示例 |
| 706 | +console.log('start'); |
| 707 | +var img = document.createElement('img'); |
| 708 | +img.onload = function () { |
| 709 | + console.log('loaded'); |
| 710 | +} |
| 711 | +img.src = '/xxx.png'; |
| 712 | +console.log('end'); |
| 713 | +``` |
| 714 | +* 事件绑定 |
| 715 | + |
| 716 | +## 03-02 |
| 717 | +### 异步和单线程-单线程 |
| 718 | +```JavaScript |
| 719 | +console.log(100); // step1 |
| 720 | +setTimeout(function () { |
| 721 | + console.log(200); // step3 |
| 722 | +}); |
| 723 | +console.log(300); // step2 |
| 724 | +``` |
| 725 | +* 从上面代码中理解单线程 |
| 726 | + * 执行第一行,打印100 |
| 727 | + * 执行setTimeout后,传入setTimeout的函数会被暂存起来,不会立即执行(单线程的特点,不能同时干两件事) |
| 728 | + * 执行最后一行打印300 |
| 729 | + * 待所有程序执行完,处于空闲状态时,会立马看有没有暂存起来的要执行 |
| 730 | + * 发现暂存起来的`setTimeout`中的函数无需等待时间,就立即来过来执行 |
662 | 731 | --- |
663 | 732 |
|
664 | 733 | ### JSDemo JS小程序 |
|
0 commit comments