【Python全栈-JavaScript】JavaScript事件

 JavaScript事件

Promise实现图片顺序加载

 

<script>
    /*var promise = new Promise(function (resolve,reject) {
        var img = new Image();
        img.src = "./img/333.jpg";
        img.onload = function (ev) {
            //ev == this
            resolve(ev); //只能传一个参数
        };
        img.onerror = function (event) {
            // event == Event {isTrusted: true, type: "error", target: img, currentTarget: img, eventPhase: 2, …}
            reject(event);//只能传一个参数
        }
    });
    promise.then(function (value) {
        //加载成功
        console.log(value);
    },function (reason) {
        // 加载失败
        console.log(reason);
    });*/


    function loadImg(src) {
        return new Promise(function (resolve,reject) {
            var img = new Image();
            img.src = src;
            img.onload = function (ev) {
                resolve(ev);
            };
            img.onerror = function (event) {
                reject(event);
            }
        });
    }

    var arr = [];
    loadImg("./img/3-.jpg").then(function (value) {
        arr.push(value);
        return loadImg("./img/4-.jpg");
    },function (reason) {
        console.log(reason);
    }).then(function (value) {
        arr.push(value);
        console.log(arr);
    },function (reason) {
        console.log(reason);
    })
</script>

---

 

同步和异步

/*
        * 同步和异步
        * 同步,是指代码从上向下执行,执行完一条,才去执行下一条,是按照顺序按照步骤的执行
        *
        * 异步,代码执行需要有一个过程,或者需要一定的时间,或者开始的时间不确定,这时候
        * 我们先让别的不相关的代码执行,而当前代码当执行完成后去执行一个回调函数
        *
        *
        *   注意：如果代码写在script中,并且写在函数外部,那么这个代码他只能执行一次,并且
        *   是在开始时就同步执行了,显然这种方式不利于代码中出现交互,因此,代码就需要写在
        *   函数中,减少代码之间同步执行方式。函数外通常仅用来定义变量(全局)和执行初始化函数
        *
        * */

var sum=0;
        var bn=document.querySelector("button");
//        所有的事件都是异步
        bn.addEventListener("click",clickHandler);

        function clickHandler(e) {
            sum++;
            oneFn(sum);     //回调
//            return sum;   //注意：所有事件函数都不能return
        }
        
        function oneFn(sum) {
            console.log(sum,"1___");
            twoFn(sum);
        }
        
        function twoFn(sum) {
            console.log(sum,"2___");
            threeFn(sum)
        }
        
        function threeFn(sum) {
            console.log(sum,"3___");
        }

---

 

宏任务和微任务

    /*
    *   宏任务  setTimeout setInterval
    *   微任务  Promise  （一共3个）
    *  同一个队列中,先执行的是宏任务,再执行其他任务,最后执行微任务
    *
    *  在当前队列中出现的异步,如果是微任务就会放在当前任务队列最底端,
    *  如果当前队列出现的异步是宏任务,就会出现在下一个队列最顶端
    *
    *   也就是说在同一个队列中触发异步,微任务先执行,宏任务后执行
    * */

两道常考的笔试题：

//        重要程度：1  ，常考的笔试题
    setTimeout(function () {
        new Promise(function (res, rej) {
            console.log("1");
            res();
        }).then(function () {
            console.log("2")
        }, function () {

        });
        console.log("3")
    }, 0);
    //        2
    console.log("4");

    //结果：4 1 3 2


    /*  setTimeout(function () {
          console.log("1");
      },0);
       new Promise(function (res,rej) {
           console.log("2");//同步执行
           res();
       }).then(function () {
           console.log("3");//异步执行
       });
       console.log("4") //同步执行  */

    // 结果： 2 4 3 1