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. Delphi10.2 关于Http 下载

    演示如图: 代码如下: unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Vari ...

  2. UML与软件建模：第二次作业（类图中类的表示）

    一.类图 (1)类图定义 类图,是UML(统一建模语言)中用于描述"类"以及"类与类"之间的示意图.它形象的描述出了系统的结构,帮助人们理解系统. 类图是在&q ...

  3. Redis 攻击还原Linux提权入侵的相关说明

    https://files.cnblogs.com/files/fudong071234/redis_crackit_v1.1%E2%80%94%E2%80%94redis%E6%94%BB%E5%8 ...

  4. linux修改默认语言

    echo $PATH #查看当前语言LANG=en_US.UTF-8 #临时修改当前语言,修改为英文echo 'LANG=en_US.UTF-8' > /etc/sysconfig/i18n # ...

  5. 2019-04-24-day039-数据库的增查

    内容回顾 多积累使用工具的经验 尽量多练习 1.多练几种类型 2.不要照着写好的sql敲,要自己组织语言 内容回顾 存储引擎 innodb : 外键 行级锁(并发修改) 事务(客户管理系统) myis ...

  6. 剑指Offer 62. 二叉搜索树的第k个结点 （二叉搜索树）

    题目描述 给定一棵二叉搜索树,请找出其中的第k小的结点.例如, (5,3,7,2,4,6,8)    中,按结点数值大小顺序第三小结点的值为4. 例如, 5 / \ 3 7 / \ / \ 2 4 6 ...

  7. linux开机默认启动命令行模式

    进入vi /etc/inittab 修改id:5:initdefault: 为id:3:initdefault:

  8. Linux 文件恢复

    可以恢复,使用系统自还工具debugfs来还原删除的文件 步骤详解 1. 查看一下当前系统版本号,及文件系统格式 [root@localhost ~]# df -T Filesystem Type 1 ...

  9. Kafka如何彻底删除topic及数据

    前言:删除kafka topic及其数据,严格来说并不是很难的操作.但是,往往给kafka 使用者带来诸多问题.项目组之前接触过多个开发者,发现都会偶然出现无法彻底删除kafka的情况.本文总结多个删 ...

  10. 11.2.0.1单实例DGduplicate过程

    记录一次duplicate完整过程1)环境说明数据库版本oracle11.2.0.1,os linux 6.6备库应用的归档,最近一次是三个月前,由于DG环境以前是好的,因此直接迁移数据即可.本次使用 ...