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. FORTH 虚拟机内部结构

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  2. jq后加标签的事件（live事件）

    在使用中  live可以对未来元素起作用(比如:js后加的div等)   live在jq1.9以上版本已经废除 原:$('#del').live('click',function(){}) 改:$(' ...

  3. 如何用jmeter进行数据库性能测试

    由于业务需要,需要进行数据库性能测试,记录过程进行学习 测试前期准备: 1.测试点准备及需求点 a.性能测试目的 b.jmeter测试数据库基本脚本  get c.数据库性能监控工具选择 d.服务器性 ...

  4. VGG网络结构

    这个结构其实不难,但是它里面训练的一些东西我还没有搞清楚,打算把昨天写的代码传上来,方便日后来看,发现了一个很有意思的库叫TF-slim打算哪天看看有没有好用的东西 from datetime imp ...

  5. Python字典的一点用法

    #python的基本语法网上已经有很多详细的解释了,写在这里方便自己记忆一些 字典是一种映射类型的数据结构,(映射一般是数学中的术语,指两个元素之间元素相互对应的关系).字典和序列有很大的不同,序列类 ...

  6. jQuery的 ready() 和原生 Js onload() 的主要区别：

    1. onload() 会等到DOM 元素和图片都加载完毕后才执行:raeady()会等到DOM元素加载完毕,但不会等到图片加载完毕就会执行. 2.onload() 如果编写了多个,则后面的会覆盖掉前 ...

  7. Mysql和Hadoop+Hive有什么关系？

    1.Hive不存储数据,Hive需要分析计算的数据,以及计算结果后的数据实际存储在分布式系统上,如HDFS上. 2.Hive某种程度来说也不进行数据计算,只是个解释器,只是将用户需要对数据处理的逻辑, ...

  8. asp.net core 实战项目（一）——ef core的使用

    数据库设计 数据结构图如下:   此次实例比较简单,暂时只设计到上述3张表 SMUser:用于存储用户信息. Role:用于存储角色信息. SMUser_Role:用建立用户和角色关系的一直关联表. ...

  9. python爬虫基础_webwechat

    简单的模拟:借用微信网页版,写个扫码页面,登录页面,实现简单的登录.联系人列表.发消息,收消息. 以下是笔记: #!/usr/bin/env python # coding:utf-8 from fl ...

  10. python之django母板页面

    其实就是利用{% block xxx %}   {% endblock %}的方式定义一个块,相当于占位.存放在某个html中,比如base.html 然后在需要实现这些块的文件中,使用继承{% ex ...