同步与异步(一)

最新推荐文章于 2023-04-17 17:58:27 发布

此鱼非闲鱼也

最新推荐文章于 2023-04-17 17:58:27 发布

阅读量220

点赞数

分类专栏：面向对象

本文链接：https://blog.csdn.net/m0_45315697/article/details/104301727

版权

本文探讨了同步与异步的概念，并重点讲解了什么是回调地狱，它导致的代码冗杂和可读性问题。通过举例展示了如何创建一个动画效果，以此说明回调地狱的情况。文章最后抛出问题，如何解决这个问题，暗示将在后续内容中继续讨论。

摘要由CSDN通过智能技术生成

1、同步与异步

    <script>
        /*
        javaScript是一个单线程的语言
        同步和异步是一种消息通知机制
        
        同步阻塞：A调用B，B处理获得结果，才会返回给A，A在这个过程中，一直在等待的B的处理结果，
                 没有拿到结果之前，需要A一直等待，直到拿到结果，然后才继续往下执行

        异步非阻塞：A调用B， 无需等待B的结果，继续运行下一步。B通过状态，通知，回调等方式在完成后，通知A
        */

        {
   
            //同步(简单理解就是只有上一件事做完，才能接着做下一件事)
            let a = 10;
            function getNum(){
   
                a = 20;
            }
            getNum();
            console.log(a);//20 a的初始值为10,然后调用函数后被修改为20

            // 异步(上一件事没做完，可以去做下一件事或多件事)
            //事件、定时器、网络请求都是异步的
            let b= 10;
            setTimeout(()=>{
   
                b = 20;
            },2000);
            console.log(b);//10 b初始值为10,然后在定时器中给b重新赋值，但是延迟2秒执行，需要等待，不同步执行，所以b最后输出还是10
        }
    </script>

2、异步的回调地狱
回调地狱是什么？简单说一下，就是为了实现某些功能，使用函数嵌套(函数里面再调用函数)，可能会嵌套很多层函数，这就形成了一个回调地狱。过多了会造成代码冗杂，可读性较差，影响对代码的理解等问题。下面举个例子：
实现元素从起点移动，沿顺时针方向，运动一周回到起点，然后再反方向运动，直到到达中心位置停止的动画效果

css代码：

 <style>
        #big{
   
             width:400pc;
             height:400pc;
             background:lightgreen;
             position:relative;
         }
        #box{
   
            width: 100px;
            height: 100px;
            background: lightblue;
            position