JS笔试题(7)同步与异步

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> JS笔试题(7)同步与异步

题目 

for (var i = 0; i 5; i++) {

    setTimeout(function() {

        console.log( i);

    }, 1000);

}

console.log( i);

1.控制台会输出什么?

2.如果我们约定,用箭头表示其前后的两次输出之间有 1 秒的时间间隔,而逗号表示其前后的两次输出之间的时间间隔可以忽略,代码实际运行的结果该如何描述?

答案:

  1. 555555。

  2. 5 - 5,5,5,5,5,即直接输出1个5,1 秒之后,输出 5 个 5。

代码执行过程如下:

(1)先用循环几乎同时设置了5个定时器;并且i的值由0变成了5;

(2)循环体外console.log(i),打印1个5;

(3)大约1秒之后,5个定时器都触发,打印5个5。

setTimeout是Js最基本的异步函数,本题主要是对Js同步和异步知识点的考察,那么这里说的同步和异步到底是什么呢?

“同步”,一下就让人想到”一起”这个词;”异步”呢,从字面来讲,像是”一边…一边…”,比如”小明一边吃雪糕一边写作业”,雪糕吃完了,作业也写完了,看起来完全没毛病,但是这样理解Js的同步和异步就错了!Javascript语言是一门单线程的语言,所有任务可以分成两种,一种是同步任务,另一种是异步任务。同步任务指的是,在”主线程”上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入”任务队列”的任务,只有等主线程任务执行完毕,”任务队列”开始通知主线程,请求执行任务,该任务才会进入主线程执行。


具体来说,异步执行的运行机制如下。(同步执行也是如此,因为它可以被视为没有异步任务的异步执行。)

(1)所有同步任务都在主线程上执行,形成一个”执行栈”。

(2)主线程之外,还存在一个”任务队列”。只要异步任务有了运行结果,就在”任务队列”之中放置一个事件。

(3)一旦”执行栈”中的所有同步任务执行完毕,系统就会读取”任务队列”,看看里面有哪些事件。那些对应的异步任务,结束等待状态,进入执行栈,开始执行。

(4)主线程不断重复上面的第三步。

题外话:

如果期望代码的输出变成:5 - 0,1,2,3,4,该怎么改造代码?

熟悉闭包的小伙伴很快能给出下面的解决办法:


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

巧妙的利用 IIFE(Immediately Invoked Function Expression:声明即执行的函数表达式)来解决闭包造成的问题,确实是不错的思路,但是初学者可能并不觉得这样的代码很好懂。有没有更符合直觉的做法?我们只需要对循环体稍做手脚,让负责输出的那段代码能拿到每次循环的i值即可。


var output = function (i) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
};
for (var i = 0; i  5; i++) {
    output(i);  // 这里传过去的 i 值被复制了
}
console.log(i);

JS笔试题(7)同步与异步感谢阅读~~~

dvdf

JS笔试题(7)同步与异步

始发于微信公众号: 前端麻辣烫

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> JS笔试题(7)同步与异步


 上一篇
JS的防抖与节流 JS的防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响
2021-04-05
下一篇 
JS数据类型的分类和判断 JS数据类型的分类和判断
     点击上方蓝色字体,关注我们 15 在前端笔试面试中“JS数据类型的分类和判断”是高频的基础考点,今天总结一下,对正在准备找工作的小伙伴应该有所帮助~ JavaScript中有6种数据类型:数字(number)、字符串(string
2021-04-05