JS篇 ------ 异步和单线程

对应知识点

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

（1）异步
js程序是单线程的，程序执行过程中，会先跳过异步，把同步程序执行完之后，再执行异步

        //  1、什么是异步（对比同步）
        console.log(1)
        setTimeout(function () {
   
            console.log(3)
        })
        console.log(2)
        // 打印顺序 1 2 3
        // js程序是单线程的 第一步先执行第一个log
        // setTimeout 是异步函数 跳过执行 把非异步程序按顺序执行之后 再执行异步函数
        // 第二步执行第三个log
        // 最后执行异步函数

（2）同步
同步执行的程序会发生阻塞，阻塞走通之后才会接着执行后面的程序

        // 对比同步
        console.log(100)
        alert(200)
        console.log(300)
        // 同步程序会发生阻塞，阻塞走通之后才会接着执行后面的程序

（3）何时需要异步
—> 在可能发生等待的情况
—> 等待过程中不能像 alert 一样阻塞车程序运行
—> 因此，所有等待的情况都需要异步

2、前端使用异步的场景

前端使用异步的场景
（1）定时任务： setTimeout，setInverval

        // setTimeout
        // 执行顺序 1 2 3
        console.log(1)
        setTimeout(function () {
   
            console.log(3)
        })
        console.log(2)

（2）网络请求： ajax 请求，axio 请求，动态 img 加载

		// 网络请求
		// 执行顺序 start  end  data
        console.log('start')
        $.get('/xxx', function (data) {
   
            console.log(data)
        })
        console.log('end')

		// 动态 img 加载
		// 执行顺序 加载图片前 图片加载之后 图片已经加载（图片加载出错） 
        console.log('加载图片前')
        var img = document.createElement('img')
        img.onerror = function () {
   
            console.log('图片加载出错')
        }
        img.onload = function () {
   
            console.log('图片已经加载')
        }
        img.src = 'xxxxx'
        console.log('图片加载之后')

（3）事件绑定

		// 事件绑定
        // 执行顺序 点击按钮前  点击按钮后  已经点击按钮了（点几次执行几次）
        console.log('点击按钮前'