欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

原生JS异步和单线程详解

程序员文章站 2022-03-03 23:26:19
...
什么是异步(对比同步),本文主要和大家分享原生JS异步和单线程详解,希望能帮助到大家。
//异步
console.log(100);
setTimeout(function(){
console.log(200);
},1000);
console.log(300);
//同步
console.log(100);
alert(200);
console.log(300);//同步会阻塞等待

何时需要异步

--在可能发生等待的情况

--等待过程中不能像alert一样阻塞程序的执行

--因此所有的“等待的情况”都需要异步

前端使用异步的场景

定时任务:

setTimeout/setInterval
console.log(100);
setTimeout(function(){
console.log(200)
},1000);
console.log(300);
//同步
console.log(100);
alert(200);
console.log(300);
网络请求:ajax请求,动态<img>加载
//ajax
console.log('start');
$.get('xxx',function(){
console.log(data);
})
console.log('end');//startenddata
//img
console.log('start');
var img = document.creatElement('img');
img.onload = function(){
console.log(loaded);
}
img.src = 'xxxxxxxxxxxxxxxx';
console.log('end')//startendloaded
事件绑定
console.log('start');
var btn1 = document.getElementById('btn1');
btn1.addEventListener('click',function(){
console.log('clicked');
})
console.log('end')
异步和单线程
同步和异步的区别?分别举一个同步和异步的例子
同步会阻塞代码执行,而异步不会
alert是同步,setTimeout是异步
一个关于setTimeout的笔试题
console.log(1);
setTimeout(function(){
console.log(2)
},0);
console.log(3);
setTimeout(function(){
console.log(4);
},1000);
console.log(5);
//13524

前端使用异步的场景有哪些

定时任务:setTimeout,setInterval

ajax请求,img加载

事件绑定

相关推荐:

实例详解js异步编程

几个JavaScript异步加载相关问题

单线程JS执行问题详解

以上就是原生JS异步和单线程详解的详细内容,更多请关注其它相关文章!