前端JS基础四（异步 单线程）

异步

何时需要异步

• 在可能发生等待的情况下
• 等待过程中不能像alert一样阻塞程序运行
• 因此，所以的“等待的情况”都需要异步

前端使用异步的场景

• 定时任务：setTimeout，setInterval
• 网络请求：ajax请求，动态加载
• 事件绑定

    console.log(100) 
    setTimeout(function(){ 
        console.log(200) 
    },1000) 
    console.log(300) //100 300 200

异步示例

    console.log('start');
    $.get('./data1.json',function(data1){
        console.log(data1);
    })
    console.log('end')//'start'  'end'   data1

    console.log(start);
    var img=document.createElement('img')
    img.onload=function(){
        console.log('loaded')
    }//图片加载完执行
    img.src='/xx.png';
    console.log('end');//start end loaded

    console.log('start')
    document.getElementById('btn1').addEventListener('click',function(){
       alert('clicked');
    })//点击时才会执行
    console.log('end');//start clicked end

同步

    console.log(100)
    alert(200);
    console.log(300)  //100 200 300

异步和单线程

    console.log(100) 
    setTimeout(function(){ 
        console.log(200) 
    }) 
    console.log(300) //100 300 200 

上述异步代码的执行过程如下
1、执行第一行打印100
2、setTimeout 异步执行，先暂存起来
3、打印 300
4、待所有程序执行完，处于空闲状态时，拿到暂存的函数在指定的时间后执行

练习题

练习题1、同步和异步的区别是什么？分别举一个同步和异步的例子 
    同步会阻塞代码执行，而异步不会 
    alert是同步，setTimeout是异步

练习题2、一个关于setTimeout的笔试题 
    console.log(1) 
    setTimeout(function(){ 
         console.log(2) 
    },0) 
    console.log(3) 
    setTimeout(function(){ 
       console.log(4) 
    },1000) 
    console.log(5)   
    //1 3 5 2 4

练习题3、前端使用异步的场景有哪些 
    定时任务：setTimeout，setInterval 
    网络请求：ajax请求，动态加载 
    事件绑定