【js基础】之异步和单线程

1.异步

前端使用异步的场景：

• 定时任务：setTimeout、setInterval；
• 网络请求：ajax请求、动态<img>加载；
• 事件绑定

//1.setTimeout
console.log(100);
setTimeout(function(){
    console.log(200);
},0);
console.log(300);
//输出结果100/300/200

//2.1、ajax请求
console.log('start');
$.get('./data1.json',function(data1){
    console.log(data1);
});
console.log('end');
//输出结果start/end/data1

//2.2、<img>加载
console.log('start');
var img = document.createElement('img');
img.onload = function(){
    console.log('loaded');
}
img.src = 'xxx.png';
console.log('end');
//输出结果start/end/loaded

//3.事件绑定
console.log('start');
document.getElementById('btn1').addEventListener('click',function(){
    console.log('clicked');
});
console.log('end');
//输出结果start/end/clicked

2.同步异步的区别

同步异步的区别：

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

//同步
  console.log(100);
  alert(200);//同步会造成阻塞
  console.log(300);

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