博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js异步和单线程
阅读量:7092 次
发布时间:2019-06-28

本文共 1404 字,大约阅读时间需要 4 分钟。

1、同步和异步的区别
    a>同步会阻塞代码执行,异步不会
    b>alert()是同步  setTimeout()是异步
2、关于setTimeout();
   console.log(1);
setTimeout(function() { console.log(2);}, 0);
console.log(3);
setTimeout(function() { console.log(4);}, 0);
console.log(5);
 
// 13524
 
3、前端执行异步的场景:
     a>定时任务
     b>网络请求   ajax  请求  动态img
     c>事件绑定
4、什么是异步:
console.log(100);
setTimeout(function() { console.log(200);}, 0);
console.log(300);
// 100 300 200

异步结果:100 300(不做等待) 200

同步结果:100 200(等待) 300   (会阻塞后面代码的运行)

对比alert();

console.log(100);

alert(200);

console.log(300);

结果:// 100  200   点击确认    300

5、什么时候需要异步?

    a>可能发生等待的情况

    b>不能像alert一样阻塞程序运行

    换言之,所有的“等待的情况”都需要异步

6、前端使用异步的场景:

    a>定时任务

   b>ajax

   demo1:ajax请求

    console.log('start');

$.get('XXX', function(data) {

    console.log(data);

});

console.log(end);

执行结果: // start  end  object

分析:

ajax请求需要等待

过程:a》打印start

        b》执行 $.get 后,函数 data1 会被暂存起来,不会立即执行(单线程的特点,不能同时干两件事)

        c》执行最后一行,打印300

        d》待所有程序执行完,处于空闲状态时,会立马看有没有暂存起来的要执行

        e》发现暂存起来的 $.get 中的 data1 未执行,待请求 data1.json返回 后,立即执行 data1

 

demo2:动态图片的加载

    console.log('start');

    const img = document.getElementById(‘img’);

    img.onLoad = function() {

         console.log('loadImg');

    };

    console.log(end);

   执行结果: // start   loadImg  end       不知道图片何时完成加载,需要等待

 demo3:事件绑定

   console.log('start');

   document.getElementById('box').on(click, function() {cosnole.log('click);});

   console.log('end');

  // start end      (点击)click     不知道用户何时点击,需要等待

7、异步和单线程:

,所谓“单线程”就是一根筋,对于拿到的程序,一行一行的执行,直到上面的执行为完成,只能做这一件事

 

 

 

 

 

转载于:https://www.cnblogs.com/echo-HE/p/10185148.html

你可能感兴趣的文章
linux实现共享内存同步的四种方法
查看>>
Memcache的安装和使用【转】
查看>>
CoffeeScirpt中文手册
查看>>
Python_删除/创建指定目录及其下所有子目录的文件,该文件记录当前文件夹的内容...
查看>>
泰为信息科技(上海)有限公司 (高级)网站开发工程师(@CBE Dept.)
查看>>
MVVM Light (Part 4)
查看>>
很强大的 js拖曳效果
查看>>
Document versioning
查看>>
jbpm入门样例
查看>>
Unity3D如何减少安装包大小
查看>>
漫游Kafka设计篇之数据持久化
查看>>
Java提高篇——equals()与hashCode()方法详解
查看>>
oracle用户创建
查看>>
dubbo-admin 管理台的部署
查看>>
ACM进阶计划
查看>>
【转】数据库中查询记录时是否每次只能使用一个索引?
查看>>
C#单例测试(懒汉式双锁保证线程安全)
查看>>
Java知识点总结
查看>>
SQL Server 2000/2005检测存储过程名是否存在,存在删除
查看>>
Windows Hook
查看>>