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. Java final类&所有构造方法均为private的类（类型说明符&访问控制符）

    1. final是类型说明符,表示关闭继承,即final类不能有子类: 但final类可能可以在类外创建对象(即final类的构造方法可以不是private型): 在同一包中时,可以在任何另外一个类中 ...

  2. Java面试题之多线程打印

    概述 作为程序员经常在面试的时候遇到多线程的问题,我印象比较深刻的就是下面这道题:写两个线程,一个线程打印 1~52,另一个线程打印字母A-Z.打印顺序为12A34B56C……5152Z.看这个题目已 ...

  3. 请解释ASP.NET 中的web 页面与其隐藏类之间的关系？

    一个ASP.NET 页面一般都对应一个隐藏类,一般都在ASP.NET 页面的声明中指定了隐藏类例如一个页面 Tst1.aspx 的页面声明如下 <%@ Page language="c ...

  4. Linux下数据库备份

    1.登录数据库服务器并切换到数据库用户下 [root@*** ~]# su - oracle 2.测试用户名密码是否能正确连接数据库 [oracle@*** ~]$ sqlplus username/ ...

  5. .NET界面控件DevExpress发布v18.2.8|附下载

    DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...

  6. Mysql 存储过程查询结果赋值到变量的方法

    drop table if exists test_tbl; create table test_tbl (name varchar(20), status int(2)); insert into ...

  7. [Deep Learning] mini-batch

    转自 http://hp.stuhome.net/index.php/2016/09/20/tensorflow_batch_minibatch/ 深度学习的优化算法,说白了就是梯度下降.每次的参数更 ...

  8. Zabbix增加邮箱后Server宕处理

    zabbix版本:4.1  DB为Mysql 过程: 1,为了增加邮件报警功能,按照网上文章,开始增加发送邮件模块.先停postfix,后安装mailx和sendmail. systemctl lis ...

  9. 2018-2019-2 学号20175223 实验二《Java面向对象程序设计》实验报告

    目录 北京电子科技学院(BESTI)实验报告 实验名称:实验二 面向对象程序设计 实验内容.步骤与体会: 一.实验二 面向对象程序设计-1 二.实验二 面向对象程序设计-2 三.实验二 面向对象程序设 ...

  10. 《团队-爬虫豆瓣top250项目-团队一阶段互评》

    团队名称:咣咣踹电脑 学号:2015035107217姓名:耿文浩 得分10 原因:组长带领的好,任务分配的好,积极帮助组员解决问题 学号:2015035107213姓名:周鑫 得分8 原因:勇于分担 ...