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. idea提交项目到码云上

    参考 https://www.cnblogs.com/BaleW/p/9293184.html

  2. UML类图中最重要的几种类关系及其表示

    阅读UML图最常见到的类与类之间的关系有如下几种: 1.依赖关系 依赖关系是指一个类在计算时,应用了“另一个类”类型的参数,这种关系是偶然.临时.弱的. UML类图中,依赖关系用带单箭头的虚线表示,即 ...

  3. 在状态栏增加图标（Android 6.0）

    在Android 启动之后,在SystemServer.java的run方法中,调用了StatusBarManagerService的构造方法,在StatusBarManagerService的构造方 ...

  4. css样式支持左右滑动要点

    div 包含 ul ,ul 包含 li div宽度固定,ul 宽度随着li的可以无限增加,li 左右滑动的最小容器. div 样式position:relative;width:xxpx;height ...

  5. 信息技术手册可视化进度报告 基于BeautifulSoup框架的python3爬取数据并连接保存到MySQL数据库

    老师给我们提供了一个word文档,里面是一份信息行业热词解释手册,要求我们把里面的文字存进数据库里面,然后在前台展示出来. 首先面临的问题是怎么把数据导进MySQL数据库,大家都有自己的方法,我采用了 ...

  6. jmeter保持登录

    1.添加配置元祖---http cookie 管理器(注意上面的http cookie管理器和其他的配置是对其的) 2.这里是当你想要配置多用户并发是要配置不同的账号,配置后记得上面的第一张图的清除c ...

  7. vue路由的懒加载

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  8. Navicat连接mysql出现1045错误

    使用Navicat连接mysql出现1045,可能的原因为忘记密码,下面方法可以帮助重置密码. 1,以管理员权限运行cmd程序: 2,cd C:\Program Files (x86)\MySQL\M ...

  9. python基础3、4---流程控制、运算符

    1.for循环 和while循环 for 临时变量 in 待遍历的数据: 循环体 (循环体这里一般加break,结束循环,执行else代码) else: 循环不满足条件执行的代码 while  表达式 ...

  10. cocoapod podpackage 自动根据podfile生成framework实现二进制化，原创脚本，转载请注明出处

    #!/bin/bash # created by lichanghong ; mail: lichanghong@soyoung.com # XXX.sh  AFNetworking 3.0.0 se ...