JS中的同步和异步

2020-12-18 本文已影响0人每日log

一、同步

01 什么是同步
同步就是一个人同一时间只能做一件事情，只有一件事情做完，才能做另外一件事情。如果有多个事情，就需要排队。

02 JS中的同步

console.log('1')
alert('2')
console.log(3)

如上代码中：执行的顺序依次是1，2，3；首先打印1，然后弹出2，只要弹框2没有被点击确定，3就要排队。此时，alert扮演着阻塞代码执行的角色。

二、异步

01 什么是异步

异步就是一个人一件事情没有做完，就能做另外一件事情，等其他事情做完，再执行没有做完的事情。

02 JS中的异步

console.log('1');
setTimeout(() => { console.log('2'); }, 1000);
console.log('3');

如上代码中：执行的顺序依次是1，3，2；首先打印1，然后打印3，等待1s后，2才打印。 setTimeout不会阻塞代码的执行，而是等待后续代码执行完成后，再执行setTimeout，此时setTimeout就扮演着异步的角色。

三、区别

同步：阻塞代码执行
异步：不会阻塞代码执行

四、应用

01 异步使用场景：定时器 setTimeout ,setInterval

console.log('1');
setTimeout(() => { console.log('2'); }, 1000);
console.log('3');

02 异步使用场景：网络请求 ajax、图片加载

console.log('1')
$.ajax({
    url: 'xxx',
    success: () => {
      console.log('2')
    }
})
console.log('3')

03 异步使用场景：事件绑定

console.log('1')
var btn = document.getElementById('btn')
btn.addEventListener('click',function(){
    console.log('2')
})
console.log('3')

思考题：