(es5)JavaScript——异步和单线程

  1、异步和同步

console.log(a)
setTimeout(function() {
     console.log(b)
},1000)
console.log(c)

          不考虑异步，程序执行顺序(同步执行)为先打印a，1s后打印b，最后打印c；

          实际上执行顺序(异步执行)是先打印a，再打印；c，1s后打印b；

由此可见异步和同步是区别在于执行顺序不同和是否阻塞程序运行——异步不阻塞，同步阻塞；

  2、前端异步使用场景

        异步可以不阻塞程序的运行，能够让需要”等待“的程序后面的代码正常继续执行，所以当程序中有”等待“的情况时需要异步：

         1) 定时任务：setTimeout，setInverval

         2) 网络请求：ajax请求，动态<img>加载

//Ajxa请求示例：
console.log('start')
$.get('./data1.json', function() {
    console.log(data1)
})
console.log('end')

              如果是同步执行，就需要等待Ajxa请求完成才能执行后面的程序，而Ajxa请求的时间是不确定的，网络环境、服务器、接口本身等情况都会影响请求时间，所以需要异步执行。

//<img>动态加载示例
console.log('start')
var img = document.createElement('img')
img.onload = function() {
      console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')

           如果是同步执行，就需要等待图片加载完成后才能继续执行，而图片资源的加载的时间同样受网络坏境、服务器等情况的影 响，所以也需要异步执行

           3) 事件绑定：用户什么时候操作是不确定的

//事件绑定示例
console.log('start')
document.getElementById('btn1').addEventListener('click', function () {
    alert('clicked')
})
console/log('end')

                   

  3、异步和单线程

console.log(1000)
setTimeout(function() {
     console.log(2000)
})
console.log(3000)

                上面代码执行的顺序：

                    1）执行第一行，打印1000

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

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

                    4）待所有程序执行完，处于空闲状态时，会查看暂存起来的定时器函数

                    5）执行定时器函数，打印3000

            JavaScript是单线程的，不能同时干两件事，所以当有异步时，异步程序会被暂存起来，等后面的程序执行完在执行异步程               序。