Event loop 事件的循环和为什么使用函数

看下面的例子为什么要使用函数 function，事件中不能使用return来返回值，但是我们可以使用函数回调 来解决

        var btn=document.querySelector("button");
        btn.addEventListener("click",buttnHandler);

        var sum=0;
        function buttnHandler(){
            sum++;
            add(sum);   //如果我们在这里写了一个参数，并且传入sum，那外面的add函数就可以接受sum的值，并输出
                        //注意，事件中不能使用return  来返回sum。  这就是为什么使用函数来回调
        }
        function add(sum){
            console.log(sum);
        }
        console.log(sum);   //当点击按钮 输出0  为什么呢？

        //因为所有的事件都是属于异步，当页面加载的时候，script第一事件会执行同步操作 也就是先输出sum 0
        //而当我们点击按钮的时候 这时候的sum 也知识增加了 并没有显示，

我们知道为什么使用函数，接下来重点

*同步和异步

*同步：是指代码从上倒下依次执行，执行完一条后，在执行下一条，按照顺序和步骤执行

*异步：代码执行需要一个过程，或者需要一定时间，或者开始的时间不确定，这时候我们

*先让别的不相关的代码执行，而当前代码当执行完成后去执行一个回调函数

注意，如果代码写在script中，并且写在函数外部，那么这个代码，只能执行一次，并且是在

开始时同步执行了。显然这个方式不利于代码中交互，因此就需要写在函数中，减少代码之间

同步执行的方式。函数外通常仅用来定义变量(全局)和执行初始化函数init()

宏任物 setTimeOut setInterVal

微任务 Promise

同一队列中，先执行的是宏任物 在执行其他任务，最后执行微任务

当前队列中出现的异步，如果是微任务就会放到当前任务队列最底端，

如果是宏任物，就会出现在下一个队列的最顶端，也就是说在同一

队列中触发异步，微任务先执行，宏任物后执行

        setTimeout(() => {
            console.log("1");
            
        }, 0);

        new Promise(function (resolve,reject){
            console.log("2");
            resolve();
        }).then(function (){
            console.log("3");
        });

        console.log("4");

为什么输出 2，4，3，1 画个图在结合上面的总结  你就明白了