JavaScript中异步编程

一 关于事件的异步

事件是JavaScript中最重要的一个特征,nodejs就是利用js这一异步而设计出来的。所以这里讲一下事件机制。

在一个js文件中,如果要运行某一个函数,有2中手段,一个就是直接调用,比如foo(),第二就是利用事件来触发,这中函数也叫回调函数,比如传递给setTimeout函数和onready属性。

1.setTimeout函数中的事件异步

setTimeout本质上也是一种异步事件,当延迟时间到的时候触发该事件,但是有的有的时候(其实也是大部分时候)都不会按照给定的延迟时间执行,先看下面的代码

        var start = new Date();
        setTimeout(function() {
            console.log(‘settimeout1:‘,new Date()-start);
        }, 500);
        while (new Date() - start < 1000) {
            console.log(‘in while‘);
        }
        document.getElementById(‘test‘).addEventListener(‘click‘, function(){
            console.log(‘test:‘,new Date()-start);
        }, false)
        for(var i=0;i<10000;i++){
            console.log(‘in for‘);
        }
        setTimeout(function(){
            console.log(‘settimeout2: ‘,new Date()-start);
        },1000);
        /* 10214
        in while
        index.jsp (第 19 行)
        10000
        in for
        index.jsp (第 25 行)
        settimeout1: 2263
        index.jsp (第 16 行)
        settimeout2: 3239
        index.jsp (第 28 行)
        test: 10006
        index.jsp (第 22 行)
        test: 28175
        index.jsp (第 22 行)
        test: 28791
        index.jsp (第 22 行)
        test: 28966
        index.jsp (第 22 行) */

如果按照正常的理解,延迟函数应该在500毫秒之后打断while循环,而事实上并没有,并且,我在while循环和for循环期间点击div时候并没有立即输出test,给出的解释就是:

a)事件队列。调用setTimeout函数的时候,会把传入它的回调函数加入到事件队列中去(事件已经初始化并且在内存了),然后继续执行后面的代码,直到再也没有代码可以运行(没有正常的运行流了,不包括事件函数等异步的内容),就会从事件队列里面pop出一个合适的事件来运行。

b)js是单线程的,事件处理器在线程空闲之前是不会运行的。

2 普通事件的异步和setTimeout类似

二 promise对象和deferred对象

1. promise

promise是一种解决ajax等异步编程回调函数嵌套太多导致代码晦涩难懂的解决方案,特别是在nodejs中,异步无处不在。不同的框架对promise的实现,一下是jquery中的promise的API。

这里不讲promise的实现原理,关于原理在另外的篇幅中介绍。

传统的ajax异步编程是这么写的(jquery1.5之前):

$.get(‘url‘, function(){
    $.get(‘url1‘, function(){
        $.get(‘url2‘, function(){

        }, ‘json‘);
    }, ‘json‘);
}, ‘json‘);

这么写代码给开发和维护带来了极大的困难,好在jquery1.5以后引入了promise,就可以这么写了:

 $.ajax( "example.php" )
.done(function() { alert("success"); })
.fail(function() { alert("error"); })
.always(function() { alert("complete"); });

现在看上去就明显简单多了。

2.deferred对象

var nanowrimoing = $.Deferred();
var wordGoal = 5000;
nanowrimoing.progress(function(wordCount) {
var percentComplete = Math.floor(wordCount / wordGoal * 100);
$(‘#indicator‘).text(percentComplete + ‘% complete‘);
});
nanowrimoing.done(function(){
$(‘#indicator‘).text(‘Good job!‘);
});

三.worker对象和多线程

四.异步脚本加载

1.传统脚本在页面中的位置

脚本分为两大类:阻塞式和非阻塞式。这里的阻塞是指加载阻塞而不是运行阻塞。

<!DOCTYPE html>
<html>
<head>
<script src="headScript"></script>
<script defer src="deferredScript"></script>
</head>
<body>
    <script async defer src="chatWidget"></script>
    <script async defer src="asyncScript"></script>
</body>
</html>

上面这部分代码是比较标准的关于脚本在一个页面中的位置,1.其中传统的未加任何修饰的headScript是阻塞式的脚本,由于浏览器从上到下解释执行JavaScript,所以这部分脚本文件在一开始就会被执行,并且在执行完之前是DOM是不会渲染的,但是head标签里面的css会加载。2.有defer属性的脚本会在DOM渲染的同时进行加载,但是会在DOM渲染完毕之后才开始执行,不幸的是,不是所有的浏览器都支持defer属性,所以才会有了jquery(function)这个东西。3.同时带有async属性和defer属性时候,defer会覆盖async,但是单独有async的时候,脚本会在DOM渲染的时候加载并且运行。

2.可编程的脚本加载

如果不是一开始就在页面种引入js文件,而是通过用户交互来实现动态的加载js脚本,可以通过编程方式加入。

浏览器获取服务器脚本有2个方法,ajax获取并且通过eval函数执行,另外一个就是在DOM中插入<script>标签,一般用第二种方法,因为浏览器帮助我们生成HTTP请求以及eval会泄露作用域。

var head = document.getElementsByTagName(‘head‘)[0];
var script = document.createElement(‘script‘);
script.src = ‘/js/feature.js‘;
head.appendChild(script);script.onload = function() {// 现在可以调用脚本里定义的函数了}

不过,一些老版本的浏览器不支持onloa事件,所以可以使用一些脚本加载库来实现这一功能,如require.js。

时间: 2024-10-13 13:45:38

JavaScript中异步编程的相关文章

Web worker 与JS中异步编程的对比

0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何时alert"end"呢? 测试一下:答案是:永远都不会alert. 解析:JavaScript引擎是单线程的,事件触发排队等候.所有任务按照触发时间先后排队处理. 上例中,排队的顺序状态是: | var t=true ; | while(t){}; | alert('end'); | 在

JavaScript的异步编程

JavaScript有几种异步编程的解决方案. 一.回调函数 被传递给其他函数的函数叫作回调函数.回调函数把任务的第二段单独写在一个函数中,待重新执行这个任务时直接调用这个回调函数. Node中文件操作经常有这样的应用. 使用回调函数时,如果只有一个回调,回调中不会包含其余的回调函数也还好,但是如果回调中包含回调,就会造成所谓的回调地狱,十分不利于代码的review和debug 二.事件监听 事件监听把事件的发生源和事件的发生后的操作进行了分离. 比如ajax中对于load事件和error事件的

辛星浅析JavaScript中的编程规范

这是接着上一篇的博文写的,首先说一下编程规范的重要性吧,它可以让我们的代码保持一致性,可预测,更易于阅读和理解.一个新的开发者可以通过阅读规范,理解其他团队成员书写的代码,更快的上手干活. 第一点就是缩进. 很糟糕的一件事就是不一致的缩进,因为它看上去像是遵循了规范,但是可能一路上伴随着混乱和惊奇,重要的是规范的使用缩进. 一些开发人员喜欢用tab制表符缩进,因为任何人都可以调整他们的编辑器以自己喜欢的空格数来显示tab.也有人喜欢用空格,通常是四个空格.一般这个无所谓,只要团队每个人都遵循同一

javascript的异步编程方法

一,callback 回调函数 即函数f1和函数f2的关系是f1(f2()); f2作为f1()的回调函数,在f1执行过程中就开始执行f2,先执行线程的主要逻辑,将比较耗时的任务放在后面执行. 回调函数的优点是简单.容易理解和部署 缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数. 二 ,事件监听 事件监听则是和代码的顺序完全无关,只取决于事件是否发生,如f1.bind(“click”,f2)即使当f1的被click时f2执行

C#中异步编程多个异常的处理方式

异步编程异常处理 在同步编程中,一旦出现错误就会抛出异常,我们可以使用try-catch来捕捉异常,未被捕获的异常则会不断向上传递,形成一个简单而统一的错误处理机制.但是对于异步编程来说,异常处理一直是件麻烦的事情,所以接下来给大家介绍一下异步编程中的错误处理方式 单个异常的捕获 public static async Task ThrowExcrptionAsync(int ms, string message) { await Task.Delay(ms); throw new Except

JavaScript中函数式编程中文翻译

原著由 Dan Mantyla 编写 近几年来,随着 Haskell.Scala.Clojure 等学院派原生支持函数式编程的偏门语言越来越受到关注,同时主流的 Java.JavaScript.Python 甚至 C++都陆续支持函数式编程.特别值得一提的是,在 nodejs 出现后,JavaScript 成为第一种从前端到后台的全栈语言,而且 JavaScript 支持多范式编程.应用函数式编程的最大挑战就是思维模式的改变———从传统面向对象的范式变为函数式编程范式. <JavaScript

javascript的异步编程解决方案收集

缘起 没理解js异步的同学看下面的例子: for (var i = 0; i < 5; i++) { //模拟一个异步操作 setTimeout(() => { console.log(i); }, 1000); } 我们想要的结果是:0,1,2,3,4 结果却出乎意料:5,5,5,5,5 分析 js的特点就是单线程异步非堵塞.需要好好理解这句话:js对于异步操作,不会停下来等待上一个异步操作完成,才进行下一个异步操作. 如果要达到顺序执行,只能用回调:也就是上一个异步操作完成时,再调用下一个

javascript中异步和闭包产生的困惑

这里我不打算大谈特谈什么是异步,什么是闭包,这些内容在博客园都已经写的够多的了,但是这些内容出现的多,并不代表所有初学者都已经撑握了,所以我还是打算,用一个比较常见的示例来分析一下,或许能让对这个问题有困惑的同学有一种顿悟的感觉.我在上一篇博客<从一道面试题分析闭包>中已经分析过什么是闭包了,但是那个例子应用的场景比较复杂,不适合初学者理解,这里我举一个更常见的例子. 假如有这样一个需求:点击菜单中的每一项,显示所点击的内容,对应的内容页面如下: <!DOCTYPE html> &

JavaScript中函数式编程的体现--map和reduce

最近在学JavaScript,中间看到map和reduce方法,觉得挺有意思的,边学边写下这篇博客. 这两个函数都在某种程度上体现了函数式编程的思想,即将函数作为传入另一个函数的参数. map()方法的调用者一般是个数组,参数是一个函数,称为callback,返回值是一个由原数组中每个元素执行给定callback函数的返回值组成的新数组. 也就是说,当你用map()方法时,是将组成数组中的每个元素作为参数,传进给定的函数,如果这个函数是有返回值的,则将每次执行函数得到的返回值组成一个新的数组返回