js是单线程的；

js中的线程分为三种

1.页面渲染

2.主代码逻辑

3.事件触发；

下面我们来看一段代码

<script>

setTimeout(function(){
    console.log(123);
    },0);
    </script>

按照js的api来看，上面的代码应该是0秒后执行，但真的是这样吗?

js中没有控制线程的，所以无法让线程进行睡眠；但我们可以用alert阻塞线程；

当我们在后面加alert后，我们看到，123并没有立刻输出；而是等待弹窗关闭后才输出；

在js中，遇到回调等都会将回调暂时挂起，等待主流程的执行完毕才会执行回调等函数；

看如下代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script>

         window.onload = function () {

             var divs = document.getElementsByTagName("div");

             for (var i = 0; i < divs.length; i++) {

                 var div = divs[i];

                 div.onclick = function () {

                         alert("我是第"+ (i+1) +"个div");

                 };

             }

         }

     </script>

 </head>

 <body>

 <div>我是第1个div</div>

 <div>我是第2个div</div>

 <div>我是第3个div</div>

 <div>我是第4个div</div>

 <div>我是第5个div</div>

 <div>我是第6个div</div>

 <div>我是第7个div</div>

 <div>我是第8个div</div>

 <div>我是第9个div</div>

 <div>我是第10个div</div>

 </body>

 </html>

很多人应该都知道上面的代码不会按照我们的本意进行执行，但你们能说清楚为什么吗？

现在我们来分析一下；

div.onclick = function () {
                        alert("我是第"+ (i+1) +"个div");
                };

后面的方法并不会立刻执行，这是我们都理解的，div.onclick指向了一个方法对象，这个方法对象被放在一个地方（挂起）

前一节我们说过了，js中没有块级作用域,所以在for里面定义的i等于在for外面定义的；

window.onload = function () {
            var divs = document.getElementsByTagName("div");

　　　  var i；
            for ( i= 0; i < divs.length; i++) {
                var div = divs[i];
                div.onclick = function () {
                        alert("我是第"+ (i+1) +"个div");
                };
            }
        }

由上我们可以看出，当for循环完毕后，i为divs的长度，而当div点击事件触发的时候，方法会向上级查找i变量，此时的i已经不是循环时的i了；

这时候我们可以通过闭包的形式来解决上面的问题；

window.onload = function () {
            var divs = document.getElementsByTagName("div");
            for (var i = 0; i < divs.length; i++) {
                var div = divs[i];
                div.onclick = (function (j){
                    return function () {
                            alert("我是第"+ (j+1) +"个div");
                    };
                })(i);
            }
        }

原理就是将循环时的i保存起来，以备后期方法调用的使用使用；

JavaScript线程(第八天)的更多相关文章

  1. setTimeout setInterval 区别 javascript线程解释

    原文:http://www.iamued.com/qianduan/1645.html 今天看到这篇文章,学到了不少东西 特此发出来 和大家分享 JavaScript的setTimeout与setIn ...

  2. javascript线程解释（setTimeout,setInterval你不知道的事）---转载

    在工作中,可能我们经常遇到在有很多 setInterval 的页面, 再手动触发 setTimeout 的时候经常失败, 尤其是 jquery做动画的时候,一些渐入溅出的东西,很多东西都不被触发……, ...

  3. 再看JavaScript线程

    继上篇讨论了一些关于JavaScript线程的知识,我们不妨回过头再看看,是不是JavaScript就不能多线程呢?看下面一段很简单的代码(演示用,没考虑兼容问题): 代码判断一: <div i ...

  4. javascript线程解释（setTimeout,setInterval你不知道的事）

    john resig写的一篇文章: 原文地址:http://ejohn.org/blog/how-javascript-timers-work/ 作为入门者来说,了解JavaScript中timer的 ...

  5. JavaScript线程

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

  6. JavaScript线程机制

    浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:JS引擎线程(用于处理JS).GUI渲染线程(用于页面渲染).浏览器事件触发线程(用于控制交互). 除此之外 ...

  7. 谈谈Javascript线程

          其实,大家都知道Javascript的语言执行环境是单线程的,浏览器无论在什么时候都有且只有一个线程在运行Javascript程序.那Ajax发送异步请求怎么解释,setTimeout/s ...

  8. Javascript线程及定时机制

    setTimeout.setInterval的使用 Javascript api文档中定义setTimeout和setInterval第二个参数意义分别为间隔多少毫秒后回调函数被执行和每隔多少毫秒回调 ...

  9. javascript 线程问题小记

    大家都知道javascript是单线程执行的,alert之后,就无法执行以下的函数,浏览器是按照从上到下的顺序来安排解析显示的. 其实虽然javascript是单线程的,但是浏览器是多线程的,典型的浏 ...

随机推荐

  1. JsonP的实现原理？

    动态创建script标签,通过script标签中的src跨域属性,连接对方接口,并将回调函数通过接口传递给对方,对方服务器在准备好数据后再通过调用回调函数并以传递参数的方式将数据返回来.

  2. R语言最优化(一维)

    最优化问题是普遍存在的,以前上运筹学课的时候也接触过最优化相关的问题,当时主要是理论课,并且关注的重点是单纯形法.运输问题以及图论等,这里指的最优化是指函数的最优化,即函数的极值,由于寻找一个局部最优 ...

  3. 简单的Java ee思维导图

  4. Git设置旧邮箱与现邮箱不一致问题

    设置名字和邮箱git config user.name 'lhr' git config user.email 'lhr@qq.com' 工程根目录创建email.sh文件粘贴以下代码 #!/bin/ ...

  5. ansible-play中for,if的使用

    #迭代循环的使用 #实现同时新建三个文件,同时部署三个服务 --- - host: websrvs remote_user: root task: - name: create some files ...

  6. Visual C++没事别启用/Za编译选项

    Visual C++对于C++标准的支持不是很完善好像是钦定了的.MS还特意在这里说了些非标准行为[1]以及扩展行为[2].这就不可避免地会让处女座程序猿感到难受(我不是处女座).所以,经过一番goo ...

  7. Can peel peel solve pesticide problem

    Can peel peel solve pesticide problem? Middle peasants medicinal modern agriculture more and more, t ...

  8. centos7：ftp上传文件

    ftp> lcd /var/www/sss  上传文件的地址还一种上传方式ftp> passivePassive mode off.ftp> passivePassive mode ...

  9. 2017-10-27模拟赛2-T1 选举(election.*)

    Description 题目描述 C国的总统选举委员会最近遇到了一些麻烦. 他们在统计各省对H先生的支持率(百分比)时,把支持率四舍五入到了整数.等他们公布结果后,该国媒体发现这些省份的支持率之和不等 ...

  10. sqlserver智能提示插件-sql prompt(9.4.6)的安装及注册流程

    官网下在地址:https://www.red-gate.com/products/sql-development/sql-prompt/ CSDN下载地址(对应的版本是9.4.6,其中包含安装包和注册 ...