从一个for循环分析JS的事件处理机制

rollback 发布于2019-08-23 18:23 / 336人阅读

摘要：最近面试的时候，经常会遇到这类问题，比如你怎么理解的事件处理机制什么任务优先级高，什么任务会在主进程中我觉得从一个例子出发可以很好的从各方面的去分析，这样也会是一个比较满意的答案常见的例子这里我们如果不去思考一下很容易得出这类答案，仔细思

最近面试的时候，经常会遇到这类问题，比如：你怎么理解JS的事件处理机制？什么任务优先级高，什么任务会在主进程中？

   我觉得从一个例子出发可以很好的从各方面的去分析，这样也会是一个比较满意的答案
   常见的例子：
               for(var i = 0; i<10; i++) {
                   setTimeout(()=>{
                       console.log(i)
                   },0)
               }
         这里我们如果不去思考一下很容易得出 0-9 这类答案，仔细思考就会发现这里输出的是10次10 
         这里我们可以先从JS的处理机制先说起，在JS的处理机制里 同步最高>异步>回调函数
         
         那么这里我们就很容易理解了，那在执行中顺序就是，先执行完同步代码for循环，然后在0ms后执行异步代码setTimeout。
         因为在执行的时候setTimeout函数会去找i这个变量，但是由于i在for里面执行完之后已经变为10，由于是var声明对于settimeout而言是全局变量，所以打印了10次10
         那如果需要实现打印0-9的话呢？
         
         第一种方法：使用ES6中的let 很容去解决作用域的问题
         如果只用ES5的方法呢，我们可以用这样实现
         for(var i = 0; i<10; i++) {
             (function(i){
              setTimeout(()=>{
                       console.log(i)
                   },0)
             })(i)                      
            }
         
         在这里去执行**立即执行函数**，它会迫使每次进入循环之前都会立即去执行代码，从而保证得到i都是不一样的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105133.html

由setTimeout深入JavaScript执行环境的异步机制

摘要：图片转引自的演讲和两个定时器中回调的执行逻辑便是典型的机制。异步编程关于异步编程我的理解是，在执行环境所提供的异步机制之上，在应用编码层面上实现整体流程控制的异步风格。问题背景在一次开发任务中，需要实现如下一个饼状图动画，基于canvas进行绘图，但由于对于JS运行环境中异步机制的不了解，所以遇到了一个棘手的问题，始终无法解决，之后在与同事交流之后才恍然大悟。问题的根节在于经典的J...

codeGoogle 2019-08-21 18:29 评论0 收藏0
前端校招准备系列--js中的setTimeout到底是什么？

摘要：浏览器是多进程的，而浏览器的内核渲染进程是多线程的。如果已经将回调函数放进任务队列，但是主线程正在执行一个非常耗时的任务，当这个任务执行完毕后，主线程去任务队列中取任务，这个时候，就会出现连续执行的情况，也就是说相当于失效了。前言在刷笔试题的时候，经常会碰到setTimeout的问题，只知道这个是设置定时器；但是考察的重点一般是在一个方法中包含了定时器，定时器中的打印和方法中打...

Godtoy 2019-08-23 13:41 评论0 收藏0
JavaScript执行机制、事件循环

摘要：曾经的理解首先，是单线程语言，也就意味着同一个时间只能做一件事，那么为什么不是多线程呢这样还能提高效率啊假定同时有两个线程，一个线程在某个节点上编辑了内容，而另一个线程删除了这个节点，这时浏览器就很懵逼了，到底以执行哪个操作呢所以，设计者把 Event Loop曾经的理解首先，JS是单线程语言，也就意味着同一个时间只能做一件事，那么为什么JavaScript不是多线程呢？这样还能提...

rose 2019-08-22 13:59 评论0 收藏0
前端性能优化指南

摘要：前端性能优化指南优化缓存异步并不等于即时。操作性能问题主要有以下原因。发生在之前，所以相对来说会造成更多性能损耗。新引擎还对对象属性访问做了优化，解决方案叫，简称。代价是前置的扫描类型编译优化。数组，，闭包变量不在优化范畴之列。前端性能优化指南 AJAX优化缓存AJAX：异步并不等于即时。请求使用GET：当使用XMLHttpRequest时，而URL长度不到2K...

Pink 2019-08-21 10:38 评论0 收藏0
Javascript事件循环入门到“忘记”（一）.md

摘要：中叫做调用栈先进后出，后进先出。如下图这是典型的内存溢出，可能会出现在某些场景下需要递归，但业务逻辑中的判断又没能正常计算进入到预设情况，于是调用栈中不断进入，又无法执行完，就造成内存溢出了。本文主要介绍Javascript事件循环在浏览器上的一些特性和应用介绍。 Javascript小知识 JavaScript的并发模型基于事件循环(Event Loop)。这个模型与像C或者Jav...

codeGoogle 2019-08-23 12:48 评论0 收藏0