4.异步和单线程

js的三座大山

1.原型和原型链
2.作用域和闭包
3.异步和单线程
+变量的类型和计算+后边的知识

//-------------题目---------------

1.同步和异步的区别是什么？分别举一个同步和异步的例子

    *同步会阻塞代码执行，异步不会；
    *alert是同步，setTimeout是异步；

2.一个关于setTimeout的笔试题

//打印顺序：1--3--5--2--1秒之后4
console.log(1);
setTimeout(function(){
    console.log(2);
},0);
console.log(3);
setTimeout(function(){
    console.log(4);
},1000);
console.log(5);

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

3个场景的特点是都需要等待，为什么等待需要异步呢，因为等待的过程中不 能有卡顿，不能阻塞；这一切的方法和设计都是因为js单线程语言决定的，单线程就只允许同时做一件事，如果想同时做多个，那其他的都必须去一边排队去，先做好一件事把剩余的做完了在做其他的，这是一个串行的过程

1.定时任务：setTimeout,setInterval
2.网络请求：ajax请求，动态<img>加载
3.事件绑定

//---------------知识点-----------------

1.什么是异步（对比同步）

  //最大的区别：有没有阻塞后面程序的进行
  //同步：会阻塞代码的执行
  //异步：（我走我的，我走完之后，回来再说）

 /*****何时需要异步（什么情况下需要等待，什么情况需要异步）*******
  *在可能发生等待的情况
 （如果需要等待，不能卡在这，需要等待过程中继续去做该做的事情）
  *等待过程中不能像alert一样阻塞程序进行
  *因此，所有的“等待的情况”都需要异步

2.前端使用异步的场景有哪些

   1.定时任务：setTimeout,setInterval  
   2.网络请求：ajax请求，动态<img>加载

*1、请求一个线上数据需要等待，如果网络情况好的话，几十毫秒、100毫秒就把这个数据拿到了，在计算机中这个一个非常长的时间，这个时间不能卡着，而且你一个页面肯定有很多请求，一请求就卡着，网页就没法看了
*2、如果网络请求不好的话，一个接口的请求可能有几秒钟的时间，几秒钟不能卡着）
*3、如果网页中使用了一google的cdn，结果近几年google在国内不能用了，请求不到我们的页面不能白着，请求这个事情我们最后不做了，后边的该怎么做怎么做，不能因为请求不到就卡着

3.事件绑定

1个点击事件绑上之后，它什么时候点不知道，但是在它点之前下面该干什么干什么，不能因为用户不点这个按钮了，下面的事情就不做了；绑上之后爱点不点，点了之后是点了之后的事情，不点还得往下走。

 eg：1.
  //先打印100--300，一秒之后打印200
  console.log(100);
  //等待一秒之后打印出来200
  setTimeout(function(){
    console.log(200);
  },1000);
  console.log(300);

 eg：2.对比同步
  //打印100之后，弹出框弹出200等待确认，确认之后再打印300
  console.log(100);
  alert(200); //在没有点击确认之前，300不会被打印出来
  console.log(300);

 eg:3.ajax请求代码示例
  //打印顺序start--end--等着这个请求返回之后在执行回调函数打出data1
  console.log('start');
   $.get('./data1.json',function(data1){
        console.log(data1);
   });
  console.log('end');
  
eg:4.<img>加载示例
    //先打印start--end--先定义一个img，img加载完之后打印loaded
    console.log('start');
    var img = document.createElement('img');
    img.onload = function(){
        //这个不会执行，因为它还没回来，只有等到img加载完之后打印
        console.log('loaded');
    };
    img.src = '/xxx.png';
    console.log('end');
    
  eg:5.事件绑定示例
//打印顺序：start--end--用户什么时候触发这个事件什么时候打clicked
    console.log('start');
    document.getElementById('btn1').addEventListener('click',function(){
        console.log('clicked');
    });
    console.log('end');

3.异步和单线程

异步和单线程的关系：
js是个单线程的语言，单线程一次只能干一件事，不能让我干两件，如果想让干多件（同时去干两件事），那就必须有一个到一边排队去，我先干完这个在说，如果没有异步的话，就会出现卡顿的情况；（如果没有异步干完第一件事，在干第二件事，第三件事的时候有可能会出现等待的现象，单线程肯定得等着，等着之后就会出现卡顿，只有异步才能搞定这个问题，想等着就去后边等着，先把接下来的事情搞定之后在去处理等待这个事情）

js之所以是异步，因为它是单线程执行的语言，必须有异步
单线程:一次只能干一件事（一次不能同时干两件事），如果想只能是一个一个排队来，每个函数拿来就坐着，哪行程序拿来就执行哪一行

eg:1.打印顺序：100--300---200
    /*
    *执行第一行打印100；
    *执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）；
    *执行最后一行，打印300；
    *待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行；
  *发现暂存起来的setTimeout中的函数无序等待时间，就立即过来行。
    */
    
    console.log(100);
    
    //setTimeout是异步的场景，所有的异步的陈述都会被拿出去暂时不执行
    //setTimeout函数是个异步，把它其中的函数拿出来，放一边等着；
    在往下执行完300，这个时候确定程序都已经执行完之后，在把之前那个函数拿过来看看;确认它是不是可以立即执行，因为这个setTimeout这个后边没有加等待时间，它可以立即执行，那200执行
    
    setTimeout(function(){
        console.log(200);
    });
    console.log(300);

eg:2.setTimeout有延迟时间
    //打印顺序：100--setTimeout里面函数先暂存起来--300--一秒钟之后执 行setTimeout打印200
    console.log(100);
    setTimeout(function(){
        console.log(200);
    },1000);
    console.log(300);
    
eg:3.ajax 
    //打印：start--发送请求之后等待，里面函数暂存起来--end--发送请求
    回来之后执行打印data
    console.log('start');
    $.get('./data1.json',function(data){
        console.log(data);
    });
    console.log('end');
    
eg:4.事件
    //打印：start--绑定事件的回调函数暂存起来--end--点击的时候才能解封执行clicked
    console.log('start');
    document.getElementById('btn1').addEventListener('click',function(){
        alert('clicked');
        
    });
    console.log('end');