图例详解那道setTimeout与循环闭包的经典面试题,

CSS3弹性伸缩布局(二卡塔 尔(英语:State of Qatar)——flex布局

2015/09/02 · CSS · CSS3

原稿出处: 郭锦荣   

上生机勃勃篇博客《CSS3弹性伸缩布局(风流倜傥卡塔 尔(英语:State of Qatar)——box布局》介绍了旧版本的box布局,而这篇博客将珍视介绍最新版本的flex布局的基本功知识。

新本子简单介绍

新本子的Flexbox模型是二〇一三年二月建议的劳作草案,这么些草案是由W3C 推出的摩登语法。这些本子立下志愿于钦定专门的工作,让新型的浏览器全面合作,在将来浏览器的新陈代谢中落实合併。

前面八个底蕴晋级(二卡塔 尔(阿拉伯语:قطر‎:实行上下文详细图解

2017/02/21 · 功底手艺 · 试行上下文

原来的书文出处: 波同学   

图片 1

先随意放张图

我们在JS学习开始的一段时期可能面试的时候时有的时候会蒙受考核变量进步的思虑题。比方先来二个简短一点的。

JavaScript

console.log(a); // 这里会打字与印刷出什么? var a = 20;

1
2
console.log(a);   // 这里会打印出什么?
var a = 20;

一时半刻先不管这几个例子,大家先引进七个JavaScript中最功底,但还要也是最要害的多少个概念施行上下文(Execution Context卡塔 尔(英语:State of Qatar)

每一遍当调整器转到可执行代码的时候,就能够进去三个推行上下文。实践上下文能够通晓为当下代码的实施景况,它会产生三个效用域。JavaScript中的运行条件大约包涵两种情况。

  • 大局情况:JavaScript代码运转起来会率先步入该碰到
  • 函数意况:当函数被调用实践时,会进来当前函数中实施代码
  • eval

因此在叁个JavaScript程序中,必定会产生多个实行上下文,在自身的上一篇小说中也是有关联,JavaScript引擎会以仓库的主意来管理它们,这一个库房,大家称其为函数调用栈(call stack)。栈底永久都以全局上下文,而栈顶就是近来正值实行的上下文。

现代码在推行进程中,遇到上述三种情状,都会扭转贰个施行上下文,放入栈中,而远在栈顶的上下文施行完成之后,就能够自行出栈。为了尤其明显的明亮那几个进度,依据上边包车型客车例子,结合图示给大家来得。

JavaScript

var color = 'blue'; function changeColor() { var anotherColor = 'red'; function swapColors() { var tempColor = anotherColor; anotherColor = color; color = tempColor; } swapColors(); } changeColor();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var color = 'blue';
 
function changeColor() {
    var anotherColor = 'red';
 
    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
 
    swapColors();
}
 
changeColor();

我们用ECStack来代表处理实施上下文组的货仓。大家十分轻松精晓,第一步,首先是大局上下文入栈。

图片 2

第一步:全局上下文入栈

大局上下文入栈之后,当中的可举办代码初阶试行,直到蒙受了changeColor(),这一句激活函数changeColor创造它协调的实施上下文,因而第二步就是changeColor的执行上下文入栈。

图片 3

其次步:changeColor的执行上下文入栈

changeColor的光景文入栈之后,调节器开端实施此中的可实践代码,蒙受swapColors()而后又激活了三个奉行上下文。由此第三步是swapColors的实施上下文入栈。

图片 4

其三步:swapColors的实行上下文入栈

在swapColors的可进行代码中,再未有遭逢任何能生成推行上下文的事态,由此这段代码顺遂实施落成,swapColors的上下文从栈中弹出。

图片 5

第四步:swapColors的实践上下文出栈

swapColors的试行上下文弹出事后,继续推行changeColor的可执行代码,也未尝再相见别的实施上下文,顺利实施完毕之后弹出。那样,ECStack中就只身下全局上下文了。

图片 6

第五步:changeColor的实践上下文出栈

全局上下文在浏览器窗口关闭后出栈。

留意:函数中,遇到return能直接终止可试行代码的施行,因而会一贯将眼下上下文弹出栈。

图片 7

全方位进度

详见理解了那个历程之后,我们就能够对施行上下文化总同盟结一些定论了。

  • 单线程
  • 协同奉行,独有栈顶的上下文处于实施中,其余上下文必要等待
  • 大局上下文独有唯生机勃勃的二个,它在浏览器关闭时出栈
  • 函数的施行上下文的个数未有范围
  • 每一次有个别函数被调用,就能有个新的实行上下文为其成立,就算是调用的自家函数,也是那般。

为了加强一下推行上下文的知道,大家再来绘制多个事例的演变进程,那是一个简便的闭包例子。

JavaScript

function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999

1
2
3
4
5
6
7
8
9
function f1(){
    var n=999;
    function f2(){
        alert(n);
    }
    return f2;
}
var result=f1();
result(); // 999

因为f第11中学的函数f2在f1的可进行代码中,并不曾被调用实践,由此施行f1时,f2不会创建新的上下文,而直至result奉行时,才创设了一个新的。具体演化进度如下。

图片 8

上例演化进度

下少年老成篇作品继续总计施行上下文的创始进程与变量对象,求持续关心与点赞,多谢我们。

前端底子进级种类目录

前端底工进级类别俺会持续立异,招待大家关怀本人民众号isreact,新的篇章更新了作者会在大众号里第有时间文告大家。也款待大家来简书关怀自个儿。

1 赞 2 收藏 评论

图片 9

图例详细解释那道setTimeout与巡回闭包的经文面试题

2017/03/06 · JavaScript · 1 评论 · settimeout, 闭包

原来的小讲出处: 波同学   

图片 10

配图与本文非亲非故

我在详见图解成效域链与闭包一文中的结尾留下了三个有关setTimeout与巡回闭包的思索题。

运用闭包,更改下边包车型大巴代码,让循环输出的结果依次为1, 2, 3, 4, 5

JavaScript

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

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

值得欢愉的是成都百货上千情侣在读了文章未来确实对闭包有了更为浓重的垂询,并标准的提交了三种写法。一些相爱的人能够认真的读书作者的篇章同一时候叁个例证一个例证的右侧练习,这种承认对本人来讲实在要命感动。不过也会有一点点幼功稍差的朋友在翻阅了后头,对于那题的领悟依然认为纳闷,由此应一些读者老爷的渴求,借此小说特意对setTimeout实行贰个相关的知识分享,愿我们读完事后都能够有新的获取。

在开始时期学习setTimeout的时候,大家相当的轻易驾驭setTimeout有多少个参数,第叁个参数为一个函数,我们透过该函数定义将在施行的操作。第一个参数为二个时辰飞秒数,表示延迟实施的时间。

setTimeout(function() { console.log('风流倜傥分钟之后作者将被打字与印刷出来') }, 1000)

1
2
3
setTimeout(function() {
    console.log('一秒钟之后我将被打印出来')
}, 1000)

图片 11

上例试行结果

只怕过几个人对此setTimeout的敞亮止步于此,但要么有无数人开掘了一些别样的事物,并在胡言乱语里建议了疑义。比方上海体育地方中的那个数字7,是如何?

每三个setTimeout在执行时,会回来贰个独一ID,上海体育场地中的数字7,正是这一个唯风华正茂ID。大家在接纳时,日常会动用三个变量将那个唯黄金时代ID保存起来,用以传入clearTimeout,死灭沙漏。

var timer = setTimeout(function() { console.log('假使不消弭作者,小编将会黄金年代秒以往出现。'); }, 1000) clearTimeout(timer); // 衰亡之后,通过setTimeout定义的操作并不会实行

1
2
3
4
5
var timer = setTimeout(function() {
    console.log('如果不清除我,我将会一秒之后出现。');
}, 1000)
 
clearTimeout(timer);  // 清除之后,通过setTimeout定义的操作并不会执行

接下去,大家还索要思量此外贰个重大的标题,那正是setTimeout中定义的操作,在什么样时候施行?为了唤起我们的推崇,我们来拜会上面包车型客车例子。

var timer = setTimeout(function() { console.log('setTimeout actions.'); }, 0); console.log('other actions.'); // 思考一下,当本人将set提姆eout的延迟时间设置为0时,上边的实行各种会是如何?

1
2
3
4
5
6
7
var timer = setTimeout(function() {
    console.log('setTimeout actions.');
}, 0);
 
console.log('other actions.');
 
// 思考一下,当我将setTimeout的延迟时间设置为0时,上面的执行顺序会是什么?

在浏览器中的console中运作试试看,比较轻易就可以以知道道答案,若是你未有打中答案,那么笔者那篇小说就值得你点叁个赞了,因为接下去自个儿享受的小知识,或者会在笔试中国救亡剧团你一命。

在对于举行上下文的牵线中,笔者与大家狼吞虎餐了函数调用栈这种差别通常数据结构的调用性格。在这里处,将会介绍其余一个不一致常常的队列结构,页面中装有由setTimeout定义的操作,都将放在同叁个连串中逐个推行。

自身用下图跟我们来得一下行列数据结构的特点。

图片 12

队列:先进先出

而以此行列实施的流年,必要静观其变到函数调用栈清空之后才起来进行。即全数可实践代码实施达成之后,才会起来实行由setTimeout定义的操作。而这一个操作步入队列的逐一,则由设定的延迟时间来支配。

之所以在地点那些事例中,即便大家将延迟时间设置为0,它定义的操作依旧须要静观其变全数代码实行完结之后才起来进行。这里的延迟时间,并非相对于setTimeout试行那生龙活虎阵子,而是相对于其余代码实施完结这一刻。所以地点的例子试行结果就非常轻便明白了。

为了救助我们知晓,再来一个结合变量升高的尤为复杂的事例。假若您能够准确看出施行顺序,那么您对此函数的执行就有了比较不错的认知了,若是还无法,就回过头去拜望别的几篇作品。

setTimeout(function() { console.log(a); }, 0); var a = 10; console.log(b); console.log(fn); var b = 20; function fn() { setTimeout(function() { console.log('setTImeout 10ms.'); }, 10); } fn.toString = function() { return 30; } console.log(fn); setTimeout(function() { console.log('setTimeout 20ms.'); }, 20); fn();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
setTimeout(function() {
    console.log(a);
}, 0);
 
var a = 10;
 
console.log(b);
console.log(fn);
 
var b = 20;
 
function fn() {
    setTimeout(function() {
        console.log('setTImeout 10ms.');
    }, 10);
}
 
fn.toString = function() {
    return 30;
}
 
console.log(fn);
 
setTimeout(function() {
    console.log('setTimeout 20ms.');
}, 20);
 
fn();

图片 13

上栗推行结果

OK,关于setTimeout就一时半刻先介绍到这里,大家回过头来看看那多少个循环闭包的思谋题。

JavaScript

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

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

假诺大家一贯那样写,遵照setTimeout定义的操作在函数调用栈清空之后才会实行的天性,for循环里定义了5个setTimeout操作。而当那几个操作起来实践时,for循环的i值,已经先一步形成了6。因而输出结果总为6。而我们想要让输出结果依次实行,大家就不得不依附闭包的性状,每一回循环时,将i值保存在二个闭包中,当setTimeout中定义的操作实施时,则做客对应闭包保存的i值就可以。

而笔者辈领略在函数中闭包推断的法规,即进行时是还是不是在其间定义的函数中拜谒了上层成效域的变量。因而我们需求包裹风流罗曼蒂克层自实行函数为闭包的多变提供标准。

据此,大家只必要2个操作就能够产生难题供给,一是采纳自实行函数提供闭包条件,二是传播i值并保存在闭包中。

JavaScript

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

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

图片 14

采用断点调节和测量试验,在chrome中查阅执行顺序与每一个闭包中差异的i值

道理当然是那样的,也能够在setTimeout的首先个参数处采取闭包。

JavaScript

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

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

1 赞 6 收藏 1 评论

图片 15

此间咱们依旧继续上大器晚成篇博客中的例子,使用最新版本的flex布局来达成平等的成效。

html代码:

XHTML

<div> <p>发生过的半空中还是看价格哈健康啊水果和卡刷卡更并且规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科学技术傻空给发生过的上空依旧看价格哈健康啊水果和卡刷卡更而且规划哈萨克的骨灰撒块光辉卡萨很透顶啊是高科技(science and technology)傻空给</p> <p>产生过的空中依然看价格哈健康啊水果和卡刷卡更并且规划哈萨克的骨灰撒块光辉卡萨很通透到底啊是高科学和技术傻空给</p> <p>产生过的长空依然看价格哈健康啊水果和卡刷卡更何况规划</p> </div>

1
2
3
4
5
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

基础的css代码:

CSS

p{ width:150px; border:3px solid lightblue; background:lightgreen; padding:5px; margin:5px; }

1
2
3
4
5
6
7
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

那时我们给div成分设置display属性为flex :

CSS

div{ display:flex; }

1
2
3
div{
    display:flex;
}

刷新浏览器后的功能是:

图片 16

能够见看到成效果跟旧版本的-webkit-box是相近的。

在新本子中安装为弹性伸缩盒的display属性值有七个:

  • flex : 将容器盒模型作为块级弹性伸缩盒呈现
  • inline-flex : 将容器盒模型作为内联级弹性伸缩盒展现

看一下新本子的flex布局的浏览器宽容境况:

图片 17

PS:能够看出,在一些比较旧的webkit内核的浏览器(Chrome,Safari卡塔尔中,大家须求利用-webkit-flex来做同盟,不过此地自个儿就大致了。

上面将次第介绍flex布局的依次属性的底子用法:

flex-direction属性

flex-direction属性用于安装伸缩项目标排列方式。

CSS

div{ display:flex; flex-direction:column; }

1
2
3
4
div{
    display:flex;
    flex-direction:column;
}

功能如下:

图片 18

结果便是容器内的有所项目根据从上到下排列的。

当您设置为row-reverse时,效果就是:

图片 19

以此是从浏览器的入手往左侧排列的。

此属性的属性值有:

  • row : 设置从左到右排列
  • row-reverse : 设置从右到左排列
  • column : 设置从上到下排列
  • column-reverse : 设置从下到上排列

大家不要紧都试一下,看看每个的效果与利益怎样。

flex-wrap属性

flex-wrap属性设置项指标换行格局(当容器宽度不足以容纳全体子项目时卡塔尔。

CSS

div{ display:flex; flex-wrap:wrap; }

1
2
3
4
div{
    display:flex;
    flex-wrap:wrap;
}

这儿结果如下:

图片 20

能够看来,当自家把浏览器窗口减弱时,第三个p成分因为容纳不下而被挤下来了。

此属性的属性值有:

  • nowrap : 暗中认可值,都在大器晚成行可能一列中浮现
  • wrap : 伸缩项目无法兼容时,自动换行
  • wrap-reverse : 伸缩项目不能够容纳时,自动换行,方向和wrap相反

当本身将flex-wrap属性设置为wrap-reverse时,运行后的效率正是变成那样:

图片 21

flex-flow属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的笔记属性。

CSS

div{ display:flex; flex-flow:row wrap; }

1
2
3
4
div{
    display:flex;
    flex-flow:row wrap;
}

上边那几个例子就一定于设置了flex-direction为row,flex-wrap为wrap。效果正是如此的:

图片 22

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:图例详解那道setTimeout与循环闭包的经典面试题,

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。