美文网首页
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中的事件执行

    课后习题 这道题是入门级的题了,因为同步队列的for循环执行完成才轮到异步队列, 每一次for循环的时候,sett...

  • 浏览器中的事件循环与Node中的事件循环

    浏览器中的事件循环 JS线程读取并执行JS代码 执行JS代码的过程中,指定异步的操作给对应的线程处理 异步线程处理...

  • js事件机制

    一、js事件机制三个阶段:事件捕获、事件目标处理函数、事件冒泡 js中事件执行的整个过程称之为事件流,分为三个阶段...

  • js笔记

    Javascript 事件循环: js解析方法时,将同步任务排队到执行栈中,异步任务排队到事件队列中。 事件队列分...

  • js中的事件冒泡

    js中如果元素是父子关系,事件会产生冒泡现象,而且执行顺序是 从 子到爷如: 点击 3 执行效果是: 阻止事件冒泡...

  • web前端面试题@十七(js的单线程和多线程)

    js单线程重点: JS 是单线程的,但是却能执行异步任务, 这主要是因为 JS 中存在事件循环(Event L...

  • 2019-01-26

    js事件 HTML事件 直接在HTML元素标签内添加时间,执行脚本 语法:...

  • js中的blur函数和addEventListener的一些细节

    question: js中的blur方法执行是直接触发调用blur事件处理函数 还是 将这个事件处理函数放...

  • js事件循环

    在js代码中,除了同步代码,就是异步代码,一个js文件是从上往下执行,遇到ajax,点击事件。settimeout...

  • js定时器

    从JS执行机制说起 浏览器(或者说JS引擎)执行JS的机制是基于事件循环。 由于JS是单线程,所以同一时间只能执行...

网友评论

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

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