Angular:先打印Console.log(11)，然后打印console.log(1)。为什么？

在Angular中，先打印Console.log(11)，然后打印console.log(1)的原因是因为Angular的变更检测机制。

Angular使用了Zone.js来实现变更检测，Zone.js会拦截所有的异步操作，包括定时器、事件等。当发生异步操作时，Zone.js会通知Angular进行变更检测，以更新视图。

在这个特定的情况下，Console.log(11)和console.log(1)都是同步操作，不会被Zone.js拦截。因此，先执行的是Console.log(11)，然后才是console.log(1)。

需要注意的是，这个顺序可能会受到其他因素的影响，比如代码的执行顺序、异步操作的执行时间等。因此，在实际开发中，不应该依赖于这种顺序来编写代码。

相关·内容

var repeatFunc=repeat(console.log,4,3000) repeatFunc(hellow world);每个3秒打印1次hellow world,打印四次

这是一个异步的处理加闭包的问题,setTimeout或者setInterval不可避免方案1async/await+Promise+setTimeout+while function repeat...}, delay) }) } } } var repeatFunc=repeat(console.log...未考虑执行时间，不严谨 function repeat(fn, num, delay) { return function (str) { var j = 1;...for (let i=1;i<= num;i++) { setTimeout(function (params) {...fn(str) }, delay * i) } } } var repeatFunc = repeat(console.log

1121 0

JavaScript的常用遍历方法整理

[i]); } // 打印 // 0 "Vue" // 1 "React" // 2 "Angular" 复制 2、for…in循环用于遍历对象的属性(数组的索引值也算属性)。...obj[item]) } // 打印 // name1 Vue // name2 React // name3 Angular 复制但有一个缺点：如果手动向数组添加成员时，索引值会出现问题：虽然数组的..., 0, 'Java') } console.log(item, arr[item]); } console.log(arr) // 打印 // 0 Vue // 1 Java // 2 React...(item of set) { console.log(item) } // 打印 // Vue // React // Angular // (2) ["name1", "Vue"] // (...}) console.log(result) // 打印 // false 复制

1.5K1 0

Change Detection And Batch Update

({val: 2}); console.log(this.state.val); 打开控制台，点击按钮你会发现打印了0 0，同时页面数据也更新成了2。...，点击按钮你会发现打印了1 2，相信这个时候很多人就懵了，为啥和第一种情况的输出不一致，不是说好的批量更新的么，怎么变成连续更新了。...Angular1是通过封装自动调用$apply，但是存在手动调用的场景，为了解决这个问题，Angular2没有采用1的实现机制，转而使用了Zone.js。...如果我们连续更新数据，Vue会立马更新DOM还是和React一样先缓存下来等待状态稳定进行批量更新呢？...React和Angular1/2都是通过获取执行上下文来进行批量更新，但是React和Angular1支持的并不彻底，都有各自的问题。

3.7K7 0

Change Detection And Batch Update

3.3K4 0

Angular 组件通信

因为控制台打印的东西比较鸡肋，所以就不配图了，嗯～希望读者跟着说明代码走一遍更容易吸收～ 1. 父组件通过属性传递值给子组件相当于你自定义了一个属性，通过组件的引入，将值传递给子组件。...-- child.component.html --> Hello! {{ parentProp }} 2....通过引用，父组件获取子组件的属性和方法我们通过操纵引用的方式，获取子组件对象，然后对其属性和方法进行访问。...我们先设置子组件的演示内容： // child.component.ts import { Component, OnInit } from '@angular/core'; @Component(...所以在父子组件中，一进来就会打印 msg 的初始值 null，然后过了一秒钟之后，就会打印更改的值 Jimmy。同理，如果你在子组件中对服务的信息，在子组件打印相关的值的同时，在父组件也会打印。

1.9K2 0

多图生动详解浏览器与Node环境下的Event Loop

为什么这段代码先打印了 3 ，再打印了 2呢？...下面公布一下答案 // 正确答案: 1 3 5 4 2 这里你是否又有个疑问了，为什么 promise 和 setTimeout 同样是异步，为什么前者优先于后者？...，然后执行步骤1；若为空，直接执行步骤1 ……往复循环那么我们来看一下刚才那段代码的具体调用过程吧（由于wx对动图的限制，我不得不把动图分成两部分，还请大家耐心观看，十分抱歉）看完这段执行过程，...(() => { console.log(7); }) console.log(8); /* 打印结果： 3 4 6 8 7 5 1 2 */...(() => { console.log('setImmediate'); }); }); 多次运行代码发现，每次都是先打印了 setImmediate，然后才打印的 setTimeout

6632 0

Angular开发实践（四）：组件之间的交互

在Angular应用开发中，组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景，也就是让两个或多个组件之间交互的方法。...先定义两个组件，分别为子组件DemoChildComponent和父组件DemoParentComponent....} onReady(evt: any) { console.log(evt); // 打印结果：子组件DemoChildComponent初始化完成！...); // 打印结果：子组件DemoChildComponent初始化完成！...} 通过服务传递 Angular的服务可以在模块注入或者组件注入（均通过providers注入）。在模块中注入的服务在整个Angular应用都可以访问（除惰性加载的模块）。

3.4K8 0

JavaScript Event Loop

这就是为什么当浏览器解析 JavaScript 代码时为什么会阻塞页面渲染，因为这两个事务在同一个线程里。...页面级代码执行完毕，执行微任务队列，首先是 then21，打印 then21，然后将它返回结果中的 then 函数放入微任务队列（此时任务队列变成：[then22, then11]）外层的 Promise...('script end'); 还是跟之前一样，先执行整体的同步代码，于是打印出 script start（然后会遇到 setTimeout，将其放入宏任务）、async1 start、async2（...同步代码执行完毕，执行微任务，微任务队列有两个函数，首先进去的是 await 后面的语句，因此先执行它，于是打印出了 async1 end。然后执行 then 函数，于是打印出了 promise2。...然后执行微任务：promise3。然后执行宏任务首先会进入 timer Queue 宏任务，于是开始执行，打印出 timer1 然后再打印出 timer2（这里就与浏览器端不同了）。

1.3K2 0

到底什么是Event Loop？那就来了解一下JavaScript分别在浏览器和Node环境下的运行机制吧

为什么这段代码先打印了 3 ，再打印了 2 呢？...下面公布一下答案 // 正确答案: 1 3 5 4 2 这里你是否又有个疑问了，为什么 promise 和 setTimeout 同样是异步，为什么前者优先于后者？...，然后执行步骤1；若为空，直接执行步骤1 ……往复循环那么我们来看一下刚才那段代码的具体调用过程吧 ?...就一定比 setImmediate 先执行呢？...(() => { console.log('setImmediate'); }); }); 多次运行代码发现，每次都是先打印了 setImmediate，然后才打印的 setTimeout

7110 0

新生代总结 JavaScript 运行机制解析

先附上本文的纲要，本文将会从这三个方面去解析 JavaScript 的运行机制首先我们来谈谈 JavaScript 的单线程 1....为什么需要异步？...(4);},0) console.log(5); 这次输出了 1 – 5 – 2 – 4 – 3 可能会有人会对 3 的输出有疑惑，首先定时器都是异步任务，会先被放入异步任务队列当中，需要等待异步任务返回结果后...("13"); 答案是：1 – 5 – 11 – 13 – 6 – 12 – 2 – 3 – 4 – 7 – 8 – 9 – 10 第一轮循环从全局任务入口，首先打印日志 1 遇到宏任务 setTimeout...p2 遇到打印语句，直接打印日志 13 本轮循环共打印：1 – 5 – 11 – 13 当前循环结果第二轮循环首先执行微任务队列 p1 和 p2 ，先进先出，先打印 6 再打印 12 微任务事件处理完毕

3112 0

新生代总结 JavaScript 运行机制解析

3983 0

Angular 的生命周期

那么，在 angular 中，这些 hooks 都有哪些呢？了解它们，对你编写程序应该在哪里编写，很重要。...('1. constructor') } ngOnChanges() { console.log('2. ngOnChanges') } ngOnInit() { console.log...('3. ngOnInit') } } 打印的信息如下：咦？...怎么没有打印 ngOnChanges 中的钩子函数信息呢？上面已经说过了，需要触发条件 @Input 的属性值改变的时候。我们来修改一下： <!...('1. demo constructor') } ngOnChanges() { console.log('2. demo ngOnChanges') } ngOnInit

8712 0

Vue引发的getter和setter

看着文档研究了一下vue的双向数据绑定,打印出Vue实例下的data对象里的属性时，发现了一个有趣的事情：它的每个属性都有两个相对应的get和set方法，我觉的这是多此一举的，于是去网上查了查Vue双向绑定的实现原理...，才发现它和Angular.js双向绑定的实现原理完全不同，Angular是用的数据脏检测，当Model发生变化，会检测所有视图是否绑定了相关数据，再更改视图。...中的data对象，打印出来的效果是一样的，都拥有get和set属性。...我们先创建一个对象字面量： var Coder = function() {...}...接下来创建一个码农的实例，isMe；此时，isMe是没有name属性的，当我们调用isMe.name时，我们会进入到get name(){...}中，先判断isMe是否有name属性，答案是否定的，那麽就添加一个

1.5K7 0

js的event loop

2，放进宏任务队列并延时1000毫秒后执行定时器里面的代码打印同步代码555 主线程完成，查看任务队列，发现有两个宏任务，宏任务1最先执行，首先打印222，然后遇到for循环打印2次888 然后在宏任务...1里又遇到定时器，宏任务3，放进宏任务并延时0秒后开始执行定时器里面的代码，然后宏任务1完成，值得注意的是，当前宏任务2在后来的宏任务3前面，但是宏任务2延时1000毫秒后执行（从进入任务队列一刻算起，...，但是它是延时0秒后执行，所以，宏任务3会先执行执行宏任务3，打印333，执行完成后看宏任务，还剩一个宏任务2 任执行宏任务2，由于之前的操作很快，还没到1000毫秒就已经执行完了，这时宏任务还是会会继续等到了...(t => { // t1 console.log(t) }); console.log(3); 执行流程： script 任务先运行。...执行所有的微任务，先后取出 t2 和 t1，分别输出 2 和 1 代码执行完毕，输出是：4321 为什么会t2先执行，理由如下： https://es6.ruanyifeng.com/#docs/promise

9352 0

【CSDN学院出品】你不可不知的JS面试题（分期更新……）

(x); // 11 const y = 1*'1'; console.log(y); // 1 第三个例子： const array = []; if (array) { console.log...我们先不着急，想它为什么会返回true。我们需要知道这两点。四则运算转化：当遇到和字符串做 “加法” 时，会先将其转化为字符串，然后再进行字符串相加。...第四个例子为什么会返回ture。因为[]先转化为字符串（对比转化中说过）。使用toString()方法转化，也就是''，然后''转化为数字0，最后false转化为0。0与0当然相等。...(obj+1) // 11 alert(obj); //10 不论是相加操作，还是alert弹出。...，然后调用。

2921 0

用VSCode开发一个asp.net core 2.0+angular 5项目(4): Angular5全局错误处理

然后在后端到Controller里面抛一个异常: 然后我们试一下: ? 可以看到, 这个全局错误处理器正常到工作了....('Before Task.'); }; Zone.afterTask = () => { console.log('After Task.'); }; Zone.run(() => { console.log...('设置Timeout'); }); 由于这个是异步的, 所以打印到控制台到顺序可能是: Before Task, After Task, 设置Timeout. js运行时里, 有一个信息队列....然后创建一个项目, 选择angular: ? 然后点击下面按钮Create Project. 然后它给出了安装和配置的说明: ? 首先执行命令安装....然后, 配置: import * as Raven from 'raven-js'; import { BrowserModule } from '@angular/platform-browser';

1.5K5 0

❤ 就这？TypeScript其实并不难！（建议收藏）❤

REN{man,woman,neutral} console.log(REN.man) 这里打印出来的是下标，第一个是0（也就是说从零开始）如果我们要打印出来内容，应该怎么操作呢？...这是一个小坑：为什么会这样？...(hls) console.log(cola) 小结：用引用类型或者基本类型声明的字符串，属性和方法的用法都是一样的 为什么要有引用类型和基本类型两种类型呢？...(reg2) 字面量声明 let reg11:RegExp=/helloworld/ console.log(reg11) let reg22:RegExp=/helloworld/gi...) console.log(reg1.exec(website)) 11 面向对象编程-类的声明和使用要学会使用类，才能new出对象来类是对象具体事物的一个抽象对象是类的具体表现类的出现

1.5K2 0

一些冷门的js操作

angular？react？我都会，我精通。然而，我现在只能说我只是熟悉，越学发现越多坑。...index，arr.map((x,index)=>x+index)，多简单是不是然后，先抛出一个问到烂的面试题： ['1','2','3'].map(parseInt) 找工作的人，看过面试题的，都知道结果是...[1,NaN,NaN]，那么为什么会这样呢？...2进制没有2 parseInt('2',3,['1','2','3','4'])//3 那就很明显了，对于为什么是[1,NaN,NaN]，其实就是： parseInt('1',0,['1','2','3...可以这样理解，对于js内部，1其实是构造类Number（1）构造出来的，相当于this指向了Number，而我们可以打印一下Number.prototype，结果有我们把toFixed方法打印出来了

3221 0

一些冷门的js操作0.前言1.数组2.位操作符2.1字符串转数字2.2更多的操作3. 构造类

angular？react？我都会，我精通。然而，我现在只能说我只是熟悉，越学发现越多坑。...((x,index)=>x+index)，多简单是不是然后，先抛出一个问到烂的面试题： ['1','2','3'].map(parseInt) 找工作的人，看过面试题的，都知道结果是[1,NaN,NaN...]，那么为什么会这样呢？...2进制没有2 parseInt('2',3,['1','2','3','4'])//3 复制代码那就很明显了，对于为什么是[1,NaN,NaN]，其实就是： parseInt('1',0,['1','...console.log(1) if(a==2) console.log(2) if(a==3) console.log(3) } //一定要记得写分号 function f(a){ (a==1)&&

6362 0

Zone.js 简介 & 抛砖引玉

Zone.js是angular团队参照NodeJS的Domain，Dart的Zone，为angular 2开发的核心组件。一开始，我对Zone.js是拒绝的。...上面的例子很明显，因为只有在 fork 中 Zone 的实例我们才设置了 Zone.current.inTheZone 为 true，所以在外面打印出来的结果是 false。...我们先简单写一个模块执行器(意思是我才不想管加载的事情)： // 写的巨简单，不要吐槽 !...('call on'); } }) // 仅仅打印版本，不做任何事情 function logVersion() { console.log('version === ', $.version...) } // 要运行的第一段代码 define('module1', function module1() { // 使用1.8版本 $.on(); // 证明即使异步调用，这里面的

6023 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Angular:先打印Console.log(11)，然后打印console.log(1)。为什么？

相关·内容

var repeatFunc=repeat(console.log,4,3000) repeatFunc(hellow world);每个3秒打印1次hellow world,打印四次

JavaScript的常用遍历方法整理

Change Detection And Batch Update

Change Detection And Batch Update

Angular 组件通信

多图生动详解浏览器与Node环境下的Event Loop

Angular开发实践（四）：组件之间的交互

JavaScript Event Loop

到底什么是Event Loop？那就来了解一下JavaScript分别在浏览器和Node环境下的运行机制吧

新生代总结 JavaScript 运行机制解析

新生代总结 JavaScript 运行机制解析

Angular 的生命周期

Vue引发的getter和setter

js的event loop

【CSDN学院出品】你不可不知的JS面试题（分期更新……）

用VSCode开发一个asp.net core 2.0+angular 5项目(4): Angular5全局错误处理

❤ 就这？TypeScript其实并不难！（建议收藏）❤

一些冷门的js操作

一些冷门的js操作0.前言1.数组2.位操作符2.1字符串转数字2.2更多的操作3. 构造类

Zone.js 简介 & 抛砖引玉

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐