首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么Javascript/Angular不让这个函数结束后再继续呢?

JavaScript和Angular不会让函数在结束后继续执行的原因是因为它们遵循了事件驱动的编程模型和单线程的执行机制。

JavaScript是一种单线程的脚本语言,意味着它只有一个主线程来执行代码。这意味着一次只能执行一个任务,如果一个任务需要花费很长时间来完成,那么其他任务就会被阻塞,导致用户界面无响应。为了避免这种情况,JavaScript采用了异步编程模型,即通过事件循环机制来处理耗时的任务。

当一个函数执行时,JavaScript会将其添加到调用栈中,并开始执行函数体内的代码。如果函数内部包含了异步操作(如网络请求、定时器等),JavaScript会将这些操作交给浏览器的Web API处理,并立即返回函数的调用位置,使得主线程可以继续执行其他任务。当异步操作完成后,浏览器会将回调函数添加到任务队列中。

事件循环机制会不断地检查调用栈和任务队列,当调用栈为空时,会从任务队列中取出一个任务并将其添加到调用栈中执行。这样就实现了异步操作的执行。

Angular是一个基于JavaScript的前端框架,它也遵循了JavaScript的单线程执行机制和事件驱动的编程模型。Angular使用了Zone.js来实现变更检测和事件循环机制。

在Angular中,当一个函数执行时,它会被Zone.js包装,并通过Zone.js提供的API来管理函数的执行。Zone.js会拦截函数的开始和结束,并在适当的时机触发变更检测,以更新视图。

由于JavaScript和Angular的单线程执行机制,如果一个函数在结束后继续执行,那么它会阻塞主线程,导致用户界面无响应。为了保持用户界面的流畅性和响应性,JavaScript和Angular采用了异步编程模型,不允许函数在结束后继续执行。

总结起来,JavaScript和Angular不让函数在结束后继续执行是为了遵循单线程的执行机制和事件驱动的编程模型,以保持用户界面的响应性和流畅性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

我们马上会看到为什么第一种形式更好。 $digest 循环会运行多少次? $digest 循环的上限是 10 次(超过 10次抛出一个异常,防止无限循环)。 $digest 循环不会只运行一次。...在当前的一次循环结束,它会执行一次循环用来检查是否有 models 发生了变化。...当 $digest 循环结束时,DOM 相应地变化。 脏检查如何被触发? angular 会在可能触发 UI 变更的时候进行脏检查:这句话并不准确。...大家都知道,在循环中批量添加DOM元素的时候,会推荐使用DocumentFragment,为什么,因为如果每次都对DOM产生变更,它都要修改DOM树的结构,性能影响大,如果我们能先在文档碎片中把DOM...先解说下angular中页面处理 ng对页面的处理过程: 浏览器把HTML字符串解析成DOM结构 ng把DOM结构给$compile,返回一个link函数 传入具体的scope调用这个link函数 得到处理

7.8K40

Angular 2:Web技术发展的必然选择

现在,我们来简要讨论一下:如何在全新的Angular 内核中融合上面提到的这些技术?为什么要这样做?...从一开始,Angular 2 就已经把web 的现状考虑在内,所以这个版本的框架使用了最新的语法。...处理这种事件将导致主线程阻塞,并且所有其他事件都得不到处理,直到这个耗时的运算结束为止才能跳到队列中的下一个事件继续处理。...那么,在Angular 里面如何使用WebWorker ?在回答这个问题之前,我们先来回顾一下AngularJS 1.x 里面的一些工作原理。...在监视器回调函数内部,Angular 经常直接操作DOM,从而无法把监视器移到WebWorker 中去,因为WebWorker 是在独立的上下文中被调用的,无法直接访问DOM。

1.8K10
  • Top JavaScript Frameworks & Topics to Learn in 2017

    Closures (闭包): 了解函数作用域的一些特征. Callbacks(回调): 回调是当另一个函数用于在有结果就绪时准备执行的函数。 就像你说,“做你的工作,做完给我打电话。...为什么?因为它会给你很多实践,并教你使用纯函数的价值,并教你如何将通用函数 reducers,用于迭代数据集合并从中提取一些值。...无论你选择什么,尽量将精力集中在它至少6个月 - 1年,再去学习另一个。 掌握它们真的需要相当多的实践。 EDIT: 为什么我没有列举出?...因为: 更多的人对学习 React 比对 Angular 感兴趣 React 在用户满意度方面显着引领 Angular 换句话说,React 赢得了社区活跃和用户体验的战斗,如果过去一年半的趋势继续保持...Angular 2 拥有改变这个局面的机会,所以 Angular 可以卷土重来,但到目前为止,React 正在处于一个优势的局面。

    2.3K00

    实战 | Change Detection And Batch Update

    那么React内部是如何实现批量更新的? 事务 React当中事务最主要的功能就是拿到一个函数的执行上下文,提供钩子函数。啥意思?...看个例子: 执行这段代码,打开控制台会发现打印如下 事务最主要的功能就是可以Wrapper一个函数,通过perform调用,在执行这个函数之前会先调用initialize方法,等这个函数执行结束了在调用...捕获到了mainFn和timeoutFn执行的上下文,这样我们就可以在每个task执行结束执行更新UI的操作了。...Angular2更新机制大体如下: ngZone是对Zone.js的服务封装,Angular2会在每个task执行结束触发更新。...Angular2可以适配任意情况,但是是通过篡改了原生方法实现的。Vue则通过ES5特性和JavaScript单线程的特性进行批量更新,无需特殊处理,可以满足任何情况。

    3.2K20

    ✨从异步讲起,时间,时间,请给函数以答案!

    这里先抛出 3 个经典的问题: “JavaScript 为什么要是单线程?” “JavaScript 的单线程,意味着什么?” “JavaScipt 异步原理是怎么实现的?”...所以,正确的做法是,先将这个人挪到一边,让他去填表格,把窗口服务腾出来给后面的人继续办业务,等表格填完了,再回过头来给你办理大额贷款。...在执行栈中的任务处理完成,主线程就开始读取任务队列中的任务并执行。按这个规则,不断往复循环。...若这人表格全填完了,就把这个消息放到 CallBack queue 里,等 Stack 里为空,再去拿 callBack queue 的消息,继续为你解决大额贷款。 以上三问,老生常谈,温故知新。...如图所示,点击一个按钮事件,随着时间推移,这个点击事件会产生三个不同的结果: 值 发生错误 事件完成 我们可以定义方法用来:捕获值,捕获错误,捕获点击事件结束

    1.1K20

    理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

    为什么这么说?让我们先来看一个小例子,比如我们有这样一个需求,在生日的控件之前添加一个年龄的选择,用以辅助生日的输入。...理解 Rx 的关键是要把任何变化想象成数据流,数据流分为几种: 1、永远不会结束的 2、有限次的,比如执行若干次结束的(包括只发生一次的) 3、当然还有一些特殊的,比如永远不会发生的(这个是为了解决某些特定场景问题存在的...在 Rx 中这种数据的转换容易不过了,最常用的一个就是 map 转换操作符,接着上面的代码继续来一个 map 函数,这里使用了 momentjs 的按当前日期减去刚刚的以天数为单位的年龄值,就得到一个大概估算的出生日期...但是到这里,你会发现我们还没有定义两个原始数据流,别急,留到后面是为了引出 Angular 对于 Rx 的良好支持。...]="xxx" 指令,这个 xxx 就是你在组件中声明的 FormGroup 类型的成员变量:比如下面代码中的 form: FormGroup; 3、在组件的构造函数中取得 FormBuilder 

    5.3K10

    Angular专题】——(2)【译】Angular中的ForwardRef

    这个错误提示是合理的,因为我们在定义NameService之前就在AppComponent的构造函数中使用了它,但是另一方面来看,在普通的ES5代码中就不会出现报错,因为函数声明会被Js解释器提升至作用域头部...那么问题来了: Javascript解释器进行这样的改动意义何在? 二....不对Class定义进行提升的理由 先来理解一下Javascript语言的机制,Javascript解释器不进行类的提升,是因为变量提升会导致在使用extend关键字实现继承时会导致错误,例如当被继承者是一个合法的函数表达式时...我们理解了class为什么不适合被提升执行顺序,这对于之前的Angular的示例来说有什么指导意义?我们只能通过将NameService移动到代码顶部的方式来解除之前的报错吗?..." } } forwardRef所做的工作,就是接收一个函数作为参数,然后返回一个class,因为这个函数并不是立即被调用的,而是在NameService声明之后才会安全地返回NameService

    3.2K20

    Angular 1 vs. Angular 2 深度比较

    结束摘要循环,当 DOM 稳定时再做一些操作 为了使 Angular 2 更易于推论,一个目标是创建更多开箱即用的透明内部构建。...根据这个 podcast (查看 3:50 处),Angular 1 是这样完成此功能的: Javascript 运行时中,每一样东西都是可以依设计打补丁的 – 如果需要我们可以改变 Number 类...有了这样的一个检测函数,我们很容易的自己亲手编写类似函数来测试绑定对象的变化,同时它也很容易被虚拟机优化。...这里有什么问题? web component 的行为跟浏览器组件的行为类似,比如有 img 标签。...这也是为什么需要像 ng-src 这样的属性来克服这个问题。 Angular 2 如何做到更好地跟 Web Components 交互?

    2.8K100

    javascript基础修炼(8)——指向FP世界的箭头函数

    函数式编程 假如对某个需求的实现,需要传入x,然后经历3个步骤得到一个答案y,你会怎样来实现?...继续进行代码转换,再来看一下f(x)执行到即将结束时的暂态状况: //fn2Result是XX.step(fn2)执行完返回的结果(值和方法都包含在Task容器中) fn2Result.step(fn3...,你可以在短短的10行代码中看到整个业务流程,当你想去深究某个具体步骤时,继续展开,另一方面,关注数据和函数组合可以将你从复杂的this和对象的关系网中解放出来。...什么是函数的副作用?一个函数执行过程对产生了外部可观察的变化那么就说这个函数是有副作用的。...事实上【深拷贝】并不是防御性编程的唯一方法,Facebook的Immutable.js就用不可变数据的思路来解决这个问题,它将对象这种引用值变得更像原始值(javascript中的原始值创建是不能修改的

    48430

    一文读懂前端技术演进:盘点Web前端20年的技术变迁史

    如果继续细探JavaScript的能力,你会发现它早期真的非常空洞,一门没有灵魂的语言,没有包管理机制,也没有像Java与C++那样的打辅助用的SDK,内置的方法也屈指可数。...7、jQuery时期(2012~2016年) 这时期以RequireJS的诞生为起点,以RN的出现结束。...Knockout是使用函数代替属性的技巧实现,它的设计影响到后来的Mobx;Ember.js是基于Object.defineProperty;Angular是将函数体转译成setter()、getter...在这个时期,Angular显然落伍了,一是Angular升级太快,国内的高手还没有消化好,新一版的Angular又发布了。...10、结束语 当初JavaScript被误解为最糟糕的语言,时至今日它是最流行的语言:GitHub 60%的开源项目都是与JavaScript有关。

    4.7K31

    2017 学习 JavaScript 感觉如何?

    那我应该选用哪一种框架?使用的重头是React, Angular and Ember,对吧?...几小时我们建立的时候,你能给我展示一下如何建立所有的库、scaffolding和boilerplate代码吗?现在哪种模块打包工具更好用,webpack还是browserify?...答: 是不好,转译器会增加显著的延迟,但是为了学习,用转译器有什么不行的?过后是很容易改的。现在我们通过建立app的状态,开始写planets.jsx文件。...对于这个app,你只需要两个变量:planets数组和一个过滤函数。...答: 你可以继续进行,也不用管它,给可能需要指定的变量定义为let,给其余的定义为const就行了。 问: 你说第二个是过滤函数,箭头是否只是老式函数声明的一种简写

    773100

    async 和 defer 的区别

    defer:可选,表示脚本可以延迟到文档完全被解析和显示执行。只对外部脚本有效。 language:已废弃。 src:可选,表示要执行代码的外部文件。src 可以包含来自外部域的文件。...标签的位置 按照惯例,所有的 都应该放入 中,但是这就意味着必须要等所有的 JavaScript 代码下载解析和执行完毕才能开始呈现页面内容(浏览器在遇到 body 标签时...假如有很多 JavaScript 代码需要执行的话,就会导致浏览器窗口出现空白,因此比较好的做法是把 JavaScript 代码放在 的最后。...延迟脚本 defer HTML4.01 中为 增加了 defer 属性,这个属性用来表明脚本执行的时候不会影响页面结构,也就是说脚本会延迟到整页面解析完毕再运行。...图片、CSS、视频等)调用相应的资源加载器进行异步网络请求,同时进行 DOM 渲染,直到遇到 标签的时候,主进程才会停止渲染等待此资源加载完毕然后调用 V8 引擎对 js 解析,继而继续进行

    5.2K60

    过去10年最重要的10个 JavaScript 框架

    当然,这些标准也比较主观: 发布于 2010–2020 期间 目前仍处于维护状态 极大地影响了大量开发人员开发软件的方式 可能给其他库提供了灵感,甚至催生出其他框架和库 如果你对这个榜单持不同意见,我觉得正常不过了...虽然这个事实有利有弊,但是你不能否认 Vue 对 JavaScript 开发人员的影响。...这就是为什么又有了后来的 Angular。...Angular 和它的前身共享了很多相同的特性,比如 MVC 架构和声明式 UI 构建方法,但它也另辟蹊径,比如它在开发时切换到TypeScript,以及改进的模块化方法。...要列举最重要的 JavaScript 框架,怎么能少了最流行的测试框架?(为什么不提 Jest?因为它只是个库,算不上框架)。

    96621

    理论 | 代码写了那么多,你搞明白yield是个啥没?

    继续往下读 .next()方法 就用上面的代码来说好了。Generator函数的特点就是“它是一个遍历器”,你不让它动,它绝对不会动。 不要用“动”这么猥琐的词好吗?...,done表示遍历没有结束,还可以继续执行next()方法。...第二次执行f.next()的时候,遇到了return,但后面没有表达式,所以返回值是undefined,一旦遇到return就表示遍历可以结束了,所以done为true。...当运行到yield '';的时候,程序暂停了,不会往下继续执行,所以下面的各种加减乘除都不会运行,这也就是为什么我们上面的代码在运行f.next()之前,虽然执行了foo()这个函数,但是a的值是0,就是因为还没有执行...done} 4、再运行.next(),从之前遇到的那个yield [表达式]处(继续恢复运行 5、当.next()传参的时候,yield [表达式]整个被替换为传入的参数。

    50710

    在 2018 年初,让我们再谈谈大前端的趋势

    上一次写前端趋势这一类的东西,是在去年的这个时候。一年多过去了,又发生了怎样的变化?...使用同一种语言作为业务开发语言,基于一个 DSL 来封装基础平台的架构,已经成为了一种大的趋势。过去,在后端的这种语言是 Java;现在,这种语言则是 JavaScript。...只是不同的人写出的函数式代码是不一样的,所谓的千人千码。 函数式编程可以减少一定量地冗余代码,它也带来了一定的新问题:可维护性及上手复杂度。 但是越少的代码,可能意味着更少的 bug,不是吗?...选型:Angular、React、Vue 我喜欢大而全的框架,而不是小而美的框架。小而美的框架,维护成本太高了——这里讨论的是维护成本,也就是你在这个软件上可能还要继续开发一年,两年,而不是几个月。...你?2018 怎么想的?

    69110

    【干货】2017年值得关注的JavaScript框架与主题

    Callbacks: 回调是JavaScript异步编程的基本概念,某个回调函数会在某个异步操作结束被调用,就好比领导对你说:好好干你的工作,做好了跟我汇报下。...TypeScript*: JavaScript的静态类型支持,不过需要特别注意的是,除非你在学习Angular 2,不然我觉得你如果要选用Angular 2的话还是要慎重考虑。...Angular 2* Angular 2 脱胎于风靡一时的Angular 1,鉴于当年疯狂的流行度,学会这个会是你简历上浓墨重彩的一笔,不过我还是推荐先学习React。...我个人也认为React是优于Angular 2的,React over Angular 2 because: 它更简单 社区很强大 RxJS RxJS 是JavaScript中一系列响应式编程工具的集合...不过我们可以通过仅引入部分所需要的库来解决这个问题,最后大概只会使得包体增加200KB左右吧。 为什么没有提到其他框架?

    1.3K60
    领券