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
- 理解那些语句会放入异步任务队列
- 理解语句放入异步任务队列的时机
上一篇: PHP 5 以来的更新记录
下一篇: promise动画
推荐阅读
-
Windows 64 位 mysql 5.7以上版本包解压中没有data目录和my-default.ini及服务无法启动的快速解决办法(问题小结)
-
详解基于React.js和Node.js的SSR实现方案
-
Three.js中矩阵和向量的使用教程
-
大数据在托管和SEO中的作用有哪些?
-
用JavaScript获取网页中的js、css、Flash等文件
-
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
-
在Python的Django框架中调用方法和处理无效变量
-
JS获取IUSR_机器名和IWAM_机器名帐号的密码
-
详解Django中的ifequal和ifnotequal标签使用
-
输入数量和价格自动计算输出金额的js代码