js异步和单线程

Posted echo-he

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js异步和单线程相关的知识,希望对你有一定的参考价值。

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、异步和单线程:

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

 

 

 

 

 

以上是关于js异步和单线程的主要内容,如果未能解决你的问题,请参考以下文章

理解JS异步和单线程

异步和单线程

异步和单线程

重回博客 谈一谈Node中的异步和单线程

前端面试-异步和单线程

node - 非阻塞的异步 IO