美文网首页
JS中的事件执行

JS中的事件执行

作者: tency小七 | 来源:发表于2019-01-02 14:56 被阅读0次
    image.png
    for(var i = 0; i < 2; i++){
        setTimeout(() => console.log(i));
    }//2 2
    for(let i = 0; i < 2; i++){
        setTimeout(() => console.log(i));
    }//1 2
    
    if(true){
        var innerVar = 1;
        const innerConst = 1;
        let innerLet = 1;
    }
    console.log(innerVar);  //1
    console.log(innerLet);  //innerLet is not defined
    console.log(innerConst);//innerConst is not defined
    
    for(let i = 0; i < 2; i++){
        console.log('前面'+i) //前面0
        i++
        console.log('后面'+i) //后面1
    }
    
    for(
        let i = (setTimeout(() => console.log('定时器'+i)),0);
        i < 2;
        i++
    ){
        console.log('前面'+i)
        i++
        console.log('后面'+i)
    }
    //运行结果是前面0 后面1  定时器0
    
    
    for(let i = (setTimeout(() => console.log("a->",i)),0);
        setTimeout(() => console.log("b->",i)),i < 2;
        i++){
            console.log('前面'+i);
            i++;
            console.log('后面'+i);
        }
    //运行结果是前面0 后面1 a-> 0 b-> 1 b->2
    

    课后习题

    for(var i = 0; i < 5;i++){
        setTimeout(function(){
            console.log(i)
        },1000*i)
    }
    // 5 5 5 5 5 
    

    这道题是入门级的题了,因为同步队列的for循环执行完成才轮到异步队列, 每一次for循环的时候,settimeout都执行一次,但是里面的function(闭包函数)没有被执行,而是被放到了任务队列里面,等待执行,当i累加到5的时候跳出循环。此时全局只有一个变量i=>5,所以打印出来都是5。

    for(var i = 0; i < 5; i++){
        (function(){
            setTimeout(function(){
                console.log(i)
            },1000*i);
        })(i)
    }
    //5 5 5 5 5
    

    这道题表面上看起来是利用了立即执行函数,但是用立即执行函数解决上面问题的重点是在于传参数,但是这里并没有把i传到函数作用域里面,function()中的参数是空的!!!!

    for(var i = 0; i < 5; i++){
        (function(i){
            setTimeout(function(){
                console.log(i)
            },1000*i);
        })(i)
    }
    //0 1 2 3 4
    

    这道题才是利用了立即执行函数传参,每次for循环一次的时候,就会新建一个函数function()并且在这样的一个函数作用域里面保存了所对应的i。

    for(var i = 0; i < 5; i++){
        setTimeout(function(i){
            console.log(i)
        }(i),1000*i)
    }
    //0 1 2 3 4是立即打印出来的而不是间隔一秒打印一个
    

    因为setTimeout函数是立即执行函数

    setTimeout(function(){
        console.log(1);
    },0);
    new Promise(function exector(resolve){
        console.log(2);
        for(var i = 0; i <10000; i++){
            i == 9999 && resolve();
        }
        console.log(3);
    }).then(function(){
        console.log(4);
    })
    console.log(5);
    //2 3 5 4 1
    

    promise一定义就会执行,then和catch才是异步的,也就是说2会先打印出来,然后3也会打印出来,之后还是主线程的5,最后才是异步队列的setTimeout和promise.then,promise所在的异步队列优先级要高一点。

    相关文章

      网友评论

          本文标题:JS中的事件执行

          本文链接:https://www.haomeiwen.com/subject/acpvfqtx.html