在html某元素上绑定一个click事件,该事件是一个执行事件很长的函数,比如执行几十亿或几百亿次加法,那么在这个函数执行的过程中,其他元素绑定的事件,是如何触发的呢,异步触发还是同步,触发时是怎么执行的呢,也是同步执行下来的么?明天好好研究一下。

  目前找到一篇不错的博文,今晚看不完了,明天接着研究及该文章其参考的文章  文章2

  通过以上文章,已经对js引擎的单线程以及浏览器内核的多线程机制了解了一番,那么对于jquery的延迟对象以及ES6的promise的异步又是怎样实现的呢。目前自己的结论是,promise是通过代码组织方式实现异步的,但仍要服于js单线程以及浏览器多线程的机制。看下面的代码

<body>
<div class="app">gagggg</div>
<div class="app2" >cccccc</div>
<script>
var defer = $.Deferred();
defer.done(function(){ alert("OK OK OK"); }) $(function () {
$('.app').click(function () {
var a = 0;
for (var i = 0; i < 5000000000; i++) {
a = a + i + 1;
}
$('.app').addClass('red');
console.log('app1'); });
$('.app2').click(function () {
defer.resolve();
});
})
</script>
</body>

.app绑定的事件在我本机上大概要6秒左右的样子执行完,在.app刚被触发的时候,立马点击.app2,发现defer.done并没有执行,也就是说defer.resolve没有触发,因为resolve在click事件内部,而事件是浏览器的事件引擎来处理的,事件发生时,事件引擎将事件处理函数放到js引擎队列的最后 ,所以resolve仍要等待js队列执行到这儿才能触发。

  那jquery的延迟对象究竟是什么东西呢。上面已经说了自己目前的结论,是代码的一直组织方式。类似与回调函数,defer.resolve()可以看成是一函数的执行,该函数执行到最后,会调用defer.done(function(){ })里的匿名函数,更精确的讲,是回调机制的另一种组织方式。自己写个大概的deferred的实现流程吧,不是很准确。

  

 var defer = $.Deferred();
var fun1 = function () {};
defer.done(fun1);
defer.resolve();

resolve将done里的函数放在了自己的执行队列里,不过resolve自身的被调用仍受制于js单线程以及浏览器多线程的机制。

  写到这儿,好想去jquery源码去研究一下延迟对象是怎样写出来的。先等等,等我能熟练用webpack+bable+es6+vue全家桶+sass+compass构建出一个vue2.0工程。

写js写傻了,明天研究一下异步的更多相关文章

  1. 新手教程:不写JS,在MIP页中实现异步加载数据

    从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...

  2. 不管你以后写不写JS,都应该学会这种思考方式

    昨天在网上看到了一篇文章说程序员写不过35这种说法,但事实上,确实并不能每个人都像我一样,在写JS中找到乐趣,就乐意写这东西直到50岁眼瞎为止. 那肯定有人要问,也许我不仅写JS写不到35,可能我连3 ...

  3. 去它的h5,我还是用js写原生跨平台app吧

    智能手机功能越来越强大,已经在逐渐替代电脑的作用.百度.腾讯.阿里的移动端日活数也在逐步的赶上甚至超越电脑端用户.叫喊着“mobile first”的公司越来越多,App开发者应运而生,且队伍日趋庞大 ...

  4. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  5. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  6. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  7. 用JS写了一个打字游戏,反正我是通不了关

    今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...

  8. JS写小游戏(一):游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  9. 如何在一个网站或者页面写js

    如何在一个网站或者页面写js: 1. JS的分层(功能):jquery(tools)  组件(ui)  应用(app).mvc(backboneJS) 2. JS的规划(管理):避免全局变量和方法(命 ...

随机推荐

  1. 利用chrome的profiler查找js的memory leak

    1. 首先要固定一个测试环境.具体来说,选择某一个可以重复的操作,作为标准的测试动作. 2. 刷新浏览器后用profiler抓下heap snapshot. 3. 进行操作,再一次抓下snapshot ...

  2. 大前端学习笔记整理【七】HTTP协议以及http与https的区别

    前言 还是老样子,新博客开始前总是想先啰嗦几句...HTTP协议其实在当初学习java时老师就有提过...但是...反正就那么过去了... 这段时间公司的项目正好要求做https的转换和迁移,然后自己 ...

  3. 图片轮播 js代码

    <script type="text/javascript"> //图片轮换 $(function () { //------------------ var sWid ...

  4. WebView cookie 管理

    在Android应用程序中经常会加载一个WebView页,如果需要客户端向WebView传递信息,比如Cookie,也是可以的. 需要应用程序先将Cookie注入进去,打开该网页时,WebView会将 ...

  5. 解决EasyUI动态添加标签渲染问题

    以下代码用于Js脚本中: var Work_Content_Back = "<table width='99%' class='table' style='margin-bottom: ...

  6. Spring控制反转(IOC)和依赖注入(DI),再记不住就去出家!

    每次看完spring的东西感觉都理解了,但是过了一段时间就忘,可能是不常用吧,也是没理解好,这次记下来. 拿ssh框架中的action,service,dao这三层举例: 控制反转:完成一个更新用户信 ...

  7. Method not found : Void System.Data.Objects.ObjectContextOptions.set_UseConsistentNullReferenceBehavior(Boolean)

    找不到方法:“Void System.Data.Objects.ObjectContextOptions.set_UseConsistentNullReferenceBehavior(Boolean) ...

  8. 第十四章:降维:奇异值分解SVD

  9. 领域模型驱动设计(Domain Driven Design)入门概述

    软件开发要干什么: 反映真实世界要自动化的业务流程 解决现实问题 领域Domain Domain特指软件关注的领域 在不能充分了解业务领域的情况下是不可能做出一个好的软件 领域建模 领域模型驱动设计 ...

  10. 彻底弄懂js循环中的闭包问题

    来源:http://www.108js.com/article/article1/10177.html?id=899 第一次接触这个问题还是在我刚开始学js的时候,当时就是一头雾水,时隔一年多了,突然 ...