异步编程的处理

时间 2019-12-20

标签异步编程处理繁體版

原文原文链接

JavaScript的执行流程是分为"同步"与"异步"javascript

传统的异步操做会在操做完成以后，使用回调函数传回结果，而回调函数中则包含了后续的工做。这也是形成异步编程困难的主要缘由：css

　　　咱们一直习惯于“线性”地编写代码逻辑，可是大量异步操做所带来的回调函数，会把咱们的算法分解地支离破碎。html

嵌套式回调

动画为例，下一个动画要等上一个执行完毕才能够继续，流程就会写到回调里面前端

//执行多个动画
$('ele1').animate({
    opacity: '.5'
}, 4000, function() {
    $('ele2').animate({
        width: '100px'
    }, 2000, function() {
        $('ele3').animate({
            height: '0'
        }, 2000);
    });
});

上面的代码编程逻辑也是正确的，可是针对这样的异步嵌套的回调逻辑，当咱们的嵌套越多，代码结构层级会变得愈来愈深。首先是阅读上会变得困难，其次是强耦合，接口变得很差扩展。咱们须要一种模式来解决这种问题，这就是Promises所要作的事情。java

为了让前端们从回调的地狱中回到天堂， jQuery 也引入了 Promise 的概念。 Promise 是一种令代码异步行为更加优雅的抽象，有了它，咱们就能够像写同步代码同样去写异步代码。这个东西看起来很复杂，实际上咱们只要抓住核心的使用就能够了。jquery

观察下边代码：算法

经过$.Deferred处理过的代码，很明显没有了回调的嵌套，虽然代码量看起来多了点，可是实际上，每个代码执行部分都被封装了起来，只留了Deferred的接口处理了，等因而咱们把执行的流程控制交给了Deferred，这样的好处就是咱们在写嵌套函数的时候，能够用deferred提供的管道风格编写同步代码了编程

dtd.then(function() {
   //操做1
}).then(function() {
   //操做2
}).then(function() {
  //操做3
})

这里要了解3个步骤api

var dtd = $.Deferred();  //建立
dtd.resolve();          //成功
dtd.then()              //执行回调

具体的咱们能够参考下jQuery的Deferred部分的API说明，点击此处异步

举例

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 6     <title>异步编程处理</title>
 7     <style type="text/css">
 8         div {
 9             background-color: yellow;
10             width: 200px;
11             height: 200px;
12             text-align: center;
13             border: 2px solid red;
14             margin: 3px;
15             font-size: 14px;
16         }
17         #block3,#block4{
18             background-color: #CAE1FF;
19         }
20         button {
21             font-size: 14px;
22         }
23     </style>
24     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
25 </head>
26 
27 <body>
28     <button>点击测试回调处理</button>
29     <button>点击测试$.Deferred处理</button>
30     </br>
31     </br>
32     <div id="block1">block1执行动画</div>
33     <div id="block2">block2执行动画</div>
34     <div id="block3">block3执行动画</div>
35     <div id="block4">block4执行动画</div>
36 
37     <script type="text/javascript">
38     // 回调处理
39     $('button:first').click(function() {
40         $("#block1").animate({
41             width: "50%"
42         }, 2000, function() {  // 嵌套回调
43             $("#block2").animate({
44                 width: "50%"
45             }, 2000);
46         });
47     });
48   
49     // jQuery的Deferred处理
50     $('button:last').click(function() {
51 
52         function animate1() {
53             var dtd = $.Deferred(); // 生成Deferred对象
54             $("#block3").animate({
55                 width: "50%"
56             }, 2000, function() {
57                 dtd.resolve(); // 改变Deferred对象的执行状态
58             });
59             return dtd;
60         }
61 
62         function animate2() {
63             var dtd = $.Deferred(); // 生成Deferred对象
64             $("#block4").animate({
65                 width: "50%"
66             }, 2000, function() {
67                 dtd.resolve(); // 改变Deferred对象的执行状态
68             });
69             return dtd;
70         }
71 
72         var anim = animate1();
73 
74         anim.then(function() {
75             $("#block3").text('block3动画动画直接结束');
76             return animate2();
77         }).then(function() {
78             $("#block4").text('block4动画动画直接结束');
79         });
80 
81     });
82 
83 
84     </script>
85 </body>
86 
87 </html>

View Code