js异步，同步及宏任务和微任务理解

最新推荐文章于 2023-05-08 16:50:02 发布

划水的乌贼

最新推荐文章于 2023-05-08 16:50:02 发布

阅读量215

点赞数

分类专栏： js 文章标签： js javascript html5 html css3

本文链接：https://blog.csdn.net/dergfg/article/details/113807607

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

保持对代码的热爱并保持怀疑态度

异步同步概念

异步：多个程序同时执行
同步：每个程序不同时执行
程序：功能
进程：一个功能的开始执行到执行结束的过程
线程：一个功能在执行过程中的每一个分支，多线程异步执行，线程越多执行速度越快，但需要消耗大量性能

同步现象

就比如这个看实例：

    alert(1);
    alert(2);
    alert(3);
    alert(4);
    alert(5)

alert弹出会阻塞程序执行，当你不点击确认的时候，他便不会执行后面的代码，当你点击后才会执行下一行代码，一个接一个执行，这就是同步。

异步现象

看实例

计时器

    var a = 10;
     setTimeout(() => {
         a = 20;
     }, 1000);
     console.log(a);

计时器就是个异步，同时执行。这里只会输出10，因为不是同步执行先10，一秒后再变成20。

循环中的事件，事件中获取循环的变量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="ali">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>
<script>
  var ali=document.querySelectorAll("#ali li")

        for(var i=0;i<ali.length;i++){  //for循环不会等待，所以点击执行只会拿到最后一个索引
        ali[i].id=i;  //提前保存id'
        console.log(ali[i].id)
        ali[i].onclick = function(){
            console.log(i);
            //console.log(this);
        }
    }
</script>
</html>