op.observe(pic)这个代码在前面为什么在console.log(one)后执行

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

<!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>

    <style>
        body{
            text-align: center;
        }
        img{
            margin-top: 1200px;
            width: 130px;
            height: 230px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <img src="" alt="" id="pic" imgDate="webp.webp.jpg">
    <img src="" alt="" id="picc" imgDate="webp.webp.jpg">
    <script>
        let arr = document.getElementsByTagName('img');
        let pic = document.getElementById('pic');
        let picc = document.getElementById('picc');
        var one = null;
        var two = null;
        let op = new IntersectionObserver(changes=>{
            console.log(changes[0]);
            one = changes[0];
        })
       op.observe(pic);
       console.log(one);

    </script>
</body>
</html>

op.observe(pic) 这一是比 console.log(one) 先执行的，你可以打断点试一下

op.observe只是监听一个元素，触发后执行是在创建op传的回调函数

因为op是new的IntersectionObserver。IntersectionObserver就是会延后执行的。