首页 > > 网页制作 > Javascript >

JavaScript异步和单线程

2018-06-24 01:58:32来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

一，同步和异步的区别：
同步会阻塞代码执行，而异步不会。（比如alert是同步，setTimeout是异步）
二，前端使用异步的场景：
1，定时任务：setTimeout，setInterval
2，网络请求：ajax请求，动态<img>加载
3，事件绑定
三，什么是单线程，和异步有什么关系
1，什么是单线程：只有一个线程，同一时间只能做一件事情，从上到下执行
例：
    // 循环执行期间，JS 执行和DOM渲染暂时卡顿
    var i, sum = 0;
    for(var i = 0; i < 1000000000; i++) {
        sum += 1;
    }
    console.log(sum);

    // alert 不处理，JS 执行和DOM渲染暂时卡顿
    alert('hello');
    console.log(2);
2，为什么是单线程：避免DOM渲染的冲突：
(1)，浏览器需要渲染DOM
(2)，JS可以修改DOM结构
(3)，JS执行的时候，浏览器DOM渲染会暂停
(4)，两段JS也不能同时执行
(5)，为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质
 
3，JS单线程解决方案：异步
    console.log(100)
    setTimeout(function() {
        console.log(200)   //反正1000ms 之后执行
    },1000)                //先不管它，先让其他JS代码执行
    console.log(300);
var ajax = $.ajax({
        url: './data.json',
        success: function(result) {  //ajax加载完才执行
            console.log(result);     //先不管它，先让其他JS代码执行
        }
    })
    console.log(ajax) //{readyState: 1, getResponseHeader: ?, getAllResponseHeaders: ?, setRequestHeader: ?, overrideMimeType: ?, …}
    console.log(200); //200 
1，异步的问题：
问题一，没按照书写方式顺序执行，可读性差
问题二，callback中不容易模块化
四，什么是event-loop（异步方案的实现方式）
event-loop：事件轮询，JS实现异步的具体解决方案。
-同步代码，直接执行
-异步函数先放在 异步队列 中
-待同步函数执行完毕，轮询执行 异步队列 中的函数
（定时任务，网络请求，事件绑定）
例1:
例2:
例3:
五，jquery的Deferred
1， jQuery1.5的变化：使用jQuery Deferred，初步引入Promise概念。
（1）仍不会也无法改变js异步和单线程的本质
（2）只能从写法上杜绝callback这种形式
（3）它是一种语法糖形式，但是解耦了代码
（4）很好地体现：开放封闭原则（对扩展开放，对修改封闭）（多人开发协作不相互干扰，减少回归测试的成本）
    // jQuery1.5之前
    var ajax = $.ajax({
        url: './data.json',
        success: function(result) {
            console.log('success1');
            console.log('success2');
            console.log('success3');
        },
        error:function(){
            console.log('error');
        }
    })
    console.log(ajax) //返回一个XHR对象
    // jquery1.5之后
    var ajax = $.ajax('./data.json');
    ajax.done(function() {
            console.log('success1');
        })
        .fail(function() {
            console.log('error1');
        })
        .done(function() {
            console.log('success2')
        })
    console.log(ajax); //返回一个deferred对象,可以进行链式操作

    // 还可以使用很像promise写法
    var ajax = $.ajax('./data.json');
    ajax.then(function(){
        console.log('success1');
    },function(){
        console.log('error1');
    }).then(function(){
        console.log('success2');
    },function(){
        console.log('error2');
    })

2，jQuery Deferred应用

看一个简单的例子：

   // 给出一段非常简单的异步操作代码，使用setTimeout函数
    var wait = function() {
        var task = function() {
            console.log('执行完成');
            // 1
            // 2
            // 3
        }
        setTimeout(task, 1000)
    }
    wait()
    // 新增需求：要在执行完成之后进行某些特别复杂的操作，代码可能会很多，而且分好几个步骤

使用Deferred：（开放封闭原则）

   function waitHandler() {
        // 定义
        var dtd = $.Deferred(); //创建一个deferred对象
        var wait = function(dtd) { //要求传入一个deferred对象
            var task = function() {
                console.log('执行完成');
                // 成功
                dtd.resolve(); //表示异步任务已经完成
                // 失败
                // dtd.reject();  //表示异步任务失败或出错
            }
            setTimeout(task, 1000)
            // wait返回
            return dtd; //要求返回deferred对象
        }
        // 最终返回  注意这里一定要有返回值
        return wait(dtd);
    }

    var w = waitHandler();
    w.then(function() {
        console.log('ok1');
    }, function() {
        console.log('err1');
    }).then(function() {
        console.log('ok2');
    }, function() {
        console.log('err2');
    })

    // 还有 w.done  w.fail

执行reject

  function waitHandler() {
        // 定义
        var dtd = $.Deferred(); //创建一个deferred对象
        var wait = function(dtd) { //要求传入一个deferred对象
            var task = function() {
                console.log('执行完成');
                // 成功
                // dtd.resolve(); //表示异步任务已经完成
                // 失败
                dtd.reject(); //表示异步任务失败或出错
            }
            setTimeout(task, 1000)
            // wait返回
            return dtd; //要求返回deferred对象
        }
        // 最终返回  注意这里一定要有返回值
        return wait(dtd);
    }

    var w = waitHandler();
    w.then(function() {
        console.log('ok1');
    }, function() {
        console.log('err1');
    })
    w.then(function() { //reject需要分开，不然执行顺序就错啦
        console.log('ok2');
    }, function() {
        console.log('err2');
    }) 

这里注意一个原则：开放封闭原则

总结，dtd的API可分成两类，用意不同

第一类（主动执行）：dtd.resolve dtd.reject
第二类（监听）：dtd.then dtd.done dtd.fail
这两类应该分开，否则后果很严重
可在上面代码最后执行dtd.reject()试下结果

使用dtd.promise()

  function waitHandler(){
        var dtd = $.Deferred();//Deferred 
        var wait = function(dtd) {
            var task = function(){
                console.log('执行完成');
                dtd.resolve();
            }
            setTimeout(task,2000);
            return dtd.promise();//注意，这里返回的是promise，而不是直接返回deferred对象
        }
        return wait(dtd);
    }
    var w = waitHandler();//经过上面的改动，w接收的就是一个promise对象
    $.when(w)
    .then(function(){
        console.log('ok1');
    })
    .then(function(){
        console.log('ok1');
    })
    w.reject()//执行这句会报错 w.reject is not a function  promise不能使用，只有监听的方法了,使用者只能监听，开发人员封装的时候才能用

 

 说明promise和deferred区别: promise只能被动监听，不能主动执行

六，Promise的基本使用和原理

1，基本语法回顾（备注：现在高级浏览器基本都支持promise，如果有些不支持，可以在cdn上找，引入 bluebird ）

<script src="https://cdn.bootcss.com/bluebird/3.5.1/bluebird.min.js"></script>

 

   function loadImg(src) {
        const promise = new Promise(function(resolve, reject) { //new Promise实例
            var img = document.createElement('img');
            img.src = src;

            img.onload = function() {
                resolve(img);
            }
            img.onerror = function() {
                reject('图片加载失败');
            }
        });
        return promise; //返回 Promise实例
    }
    var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo.png";
    var result = loadImg(src); //Promise实例
    result.then(function(img) { //then监听结果,成功时执行resolve(), 失败时执行reject()
        console.log(1, img.width); //1 164
        return img;
    }, function(img) {
        console.log('failed');
        return img;
    }).then(function(img) {
        console.log(2, img.height) //2 36
    })

2，异常捕获

    // 规定：then只接受一个参数(成功的处理函数），最后统一用catch捕获异常
    // var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo.png";
    var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo_1.png";//写一个不存在的地址
    var result = loadImg(src);
    result.then(function(img) {
        console.log(img.width);
        return img;
    }).then(function(img) {
        console.log(img.height);
    }).catch(function(ex) {
        // 最后统一用catch捕获异常
        console.log(ex); //图片加载失败  (logo_1.png:1 GET https://shared-https.ydstatic.com/dict/v2016/result/logo_1.png 404 (Not Found))
    })

自定义错误：

function loadImg(src) {
        const promise = new Promise(function(resolve, reject) { //new Promise实例
            var img = document.createElement('img');
            // 模拟抛出错误 模拟语法错误，逻辑之外的bug
            throw new Error('自定义错误');
            img.src = src;

            img.onload = function() {
                resolve(img);
            }
            img.onerror = function() {
                reject('图片加载失败');
            }
        });
        return promise; //返回 Promise实例
    }

     // 规定：then只接受一个参数(成功的处理函数），最后统一用catch捕获异常
    var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo.png";
    // var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo_1.png"; //写一个不存在的地址
    var result = loadImg(src);
    result.then(function(img) {
        console.log(img.width);
        return img;
    }).then(function(img) {
        console.log(img.height);
    }).catch(function(ex) {
        // 最后统一用catch捕获异常
        console.log(ex); 
    })

3，多个串联

   // 多个串联 图片只是用来模拟，实际可能更多的不是用图片，比如处理用户信息啥的，加载用户信息的时候，先拿到用户信息，再去处理其他信息等
    var src1 = 'https://shared-https.ydstatic.com/dict/v2016/result/logo.png';
    var result1 = loadImg(src1);
    var src2 = 'https://img.mukewang.com/user/57b98e990001351004400440-100-100.jpg';
    var result2 = loadImg(src2);

    // 链式操作
    result1.then(function(img1) {
        console.log('第一个图片加载完成', img1.width);
        return result2; //重要！！！
    }).then(function(img2) {
        console.log('第二个图片加载完成', img2.width);
    }).catch(function(ex) {
        // 最后统一用catch捕获异常
        console.log(ex);
    })

4，Promise.all （全部promise实例完成后） 和 Promise.race （只要有一个promise实例完成）

   // Promise.all 接收一个包含多个promise实例的数组，待全部完成之后，统一执行success
    var src1 = 'https://shared-https.ydstatic.com/dict/v2016/result/logo.png';
    var result1 = loadImg(src1); //pending
    var src2 = 'https://img.mukewang.com/user/57b98e990001351004400440-100-100.jpg';
    var result2 = loadImg(src2);
    Promise.all([result1, result2]).then(datas => {
        // 接收到的datas是一个数组，依次包含了多个promise返回的内容
        console.log('all', datas[0]); //all <img src=?"https:?/?/?shared-https.ydstatic.com/?dict/?v2016/?result/?logo.png">?
        console.log('all', datas[1]); //all <img src=?"https:?/?/?img.mukewang.com/?user/?57b98e990001351004400440-100-100.jpg">?
    })

Promise.race （只要有一个promise实例完成）

    // Promise.race 接收一个包含多个promise实例的数组
    // 只要有一个完成，就执行success
    Promise.race([result1, result2]).then(data => {
        // data即最先执行完成的promise的返回值
        console.log('race', data); //race <img src=?"https:?/?/?shared-https.ydstatic.com/?dict/?v2016/?result/?logo.png">?
    })

promise标准

1，关于“标准”的闲谈

任何技术推广使用都需要一套标准来支撑 
如html css js等，无规矩不成方圆
任何不符合标准的东西，终将会被用户抛弃
不要挑战标准，不要自造标准

2，状态变化

三种状态：pending fulfilled rejected
pending:   初始状态
fulfilled： 成功
rejected：失败

pending到fulfilled，或者pending到rejected，状态不可逆

3，then

Promise实例必须实现then方法
then（）必须可以接收两个函数作为参数
then（）返回的必须是一个Promise实例
如果then中没有返回promise实例，则默认返回的是上一个promise实例，如果返回了一个promise实例，那就默认为返回的promise实例

七，async／await（和promise区别、联系等）（babel已经支持，koa也已经支持）

1，then只是将callback拆分了

    // then只是将callback拆分了
    var w = waitHandler();
    w.then(function() {
        console.log('ok1');
    }, function() {
        console.log('err1');
    }).then(function() { 
        console.log('ok2');
    }, function() {
        console.log('err2');
    })

 


2，async/await是最直接的同步写法

   // async/await是最直接的同步写法
    const load = async function() {
        const result1 = await loadImg(src1);
        console.log(result1);
        const result2 = await loadImg(src2);
        console.log(result2);
    }
    load()

完整的：

    import 'babel-polyfill'; //引入babel-polyfill 

    // async/await是最直接的同步写法
    function loadImg(src) {
        const promise = new Promise(function(resolve, reject) {
            var img = document.createElement('img');
            img.src = src;

            img.onload = function() {
                resolve(img);
            }
            img.onerror = function() {
                reject('图片加载失败');
            }
        });
        return promise;
    }
    var src1 = 'https://shared-https.ydstatic.com/dict/v2016/result/logo.png';
    var src2 = 'https://img.mukewang.com/user/57b98e990001351004400440-100-100.jpg';
    // async/await是最直接的同步写法
    const load = async function() { //函数必须用async标识
        const result1 = await loadImg(src1); //await后面跟的是一个Promise实例
        console.log(result1);
        const result2 = await loadImg(src2); //await后面跟的是一个Promise实例
        console.log(result2);
    }
    load()

 

用法：
要在函数体内使用await，函数必须用async标识
await后面跟的是一个Promise实例
需要安装babel-polyfill

npm i --save-dev babel-polyfill

3，总结

使用了Promise，并没有和Promise冲突
完全是同步的写法，再也没有回调函数
但是：改变不了js单线程，异步的本质

 
八，当前 JS 解决异步的方案总结

1，jquery Deferred
2，Promise
3，Async／await

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：JavaScript原型与原型链，原型的实际应用

下一篇：Head First HTML与CSS、XHTML (中文版).(Elisabeth Freeman) PDF

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签