js异步和单线程

Posted 2021-01-30 echo-he

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 是单线程的语言，所谓“单线程”就是一根筋，对于拿到的程序，一行一行的执行，直到上面的执行为完成，只能做这一件事