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

js中的同步和异步

程序员文章站 2022-06-10 09:59:59
...
  • 同步和异步的区别是什么?分别举一个同步和异步的例子
  • 一个关于setTimeout的笔试题
  • 前端使用异步的场景有哪些

知识点:

  • 什么是异步(对比同步)
  • 前端使用异步的场景
  • 异步和单线程

同步和异步的区别?
是否发生了阻塞,例子ajax的同步和异步请求。
使用场景?
是否需要等待执行。
定时任务:setTimeout,setInverval
网络请求:ajax请求,动态img加载
事件绑定。

/*setTimeout*/
console.log(1);
setTimeout(function(){console.log(2)},0);
console.log(3);

/*ajax请求*/
console.log("start");
$.get('./data.json',function(data){
    console.log(data);
})
console.log("end");

/*img*/
console.log("start");
var img = document.creatElement('img');
img.onload = function(){
    console.log('loaded');
}
img.src = 'aa.jpg';
console.log('end');

/*DOM事件*/
console.log("start");
document.getElementById('btn1').addEventListener('click',function(){
    alert("click");
})
console.log("end")
console.log(1);
setTimeout(function(){console.log(2)},0);
console.log(3);

//执行结果为1,3,2
console.log("a");
while(true){};
console.log("b");
//执行结果为a
console.log("a");
setTimeout(function(){console.log("b");},0);
while(1){};
//执行结果为a

js是单线程的,先执行同步任务,在执行异步任务;

for(var i=0;i<4;i++){
    setTimeout(function(){
        console.log(i)
    },1000)
}
//执行结果为4,4,4,4

异步任务的放入时间和执行时间不同;

如何理解JS的单线程
单个执行的任务

什么是任务队列
先执行同步任务,然后执行异步任务;
异步任务的放入时间和执行不同;

什么是Event Loop
简言之就是JS只有一个主线程,主线程执行完执行栈的任务后去检查异步的任务队列,如果异步事件触发,则将其加到主线程的执行栈。

异步任务
setTimeout和setInterval
DOM事件
有时候一个按钮的单击时间没有被相应就是因为执行栈中的同步任务还没有执行完,那么dom时间就没有办法进入到执行栈中执行;

ES6事件

总结

  • 理解JS的单线程的概念
  • 理解任务队列
  • 理解Event Loop
  • 理解那些语句会放入异步任务队列
  • 理解语句放入异步任务队列的时机
相关标签: js同步和异步