Javascript异步编程

      Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。"同步模式"：后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。"异步模式"：每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。 常见的异步操作：网络请求（ajax http.get）、定时函数（setTimeout setInterval）、事件监听和处理。

      一、回调函数

function getUserInput(firstName, lastName, callback)  {
    // Do other stuff to validate firstName/lastName here
    // Now save the names
    if(callback && (callback  instanceof Function){
        callback (firstName, lastName);
    }
}

      回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护。

      二、事件监听

f1.on('done', f2);
 
function f1(){
　  setTimeout(function () {
　　　　// f1的任务代码
　　　　f1.trigger('done');
　　}, 1000);
}

      三、jquery deferred对象

      jQuery规定，deferred对象有三种执行状态----未完成，已完成和已失败。如果执行状态是"已完成"（resolved）,deferred对象立刻调用done()方法指定的回调函数；如果执行状态是"已失败"，调用fail()方法指定的回调函数；如果执行状态是"未完成"，则继续等待。

var wait = function(dtd){
　　var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
　　var tasks = function(){
　　　　alert("执行完毕！");
　　　　dtd.resolve(); // 改变Deferred对象的执行状态
　　};
　　setTimeout(tasks,5000);
　　return dtd.promise(); // 返回promise对象
};
$.when(wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });

       四、Promise对象

       1、定义

             Promise 是一个对象，从它可以获取异步操作的消息。 一旦状态改变，就不会再变，任何时候都可以得到这个结果。

        2、基本用法

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}
 
timeout(100).then(function(value) {
  // success
}, function(error) {
  // failure
});

      3、Promise.prototype.then()

            Promise 实例添加状态改变时的回调函数。

function add(x1, x2) {
    return new Promise(function (resolve, reject) {
        var res = x1 + x2;
        console.log(res);
        resolve(res);
    });
}
add(1, 2).then(function (res) {
    return add(3, 4);
}).then(function () {
    return add(4,5);
})

4、Promise.prototype.catch()

      Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

5、Promise.all()

     Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
 

　　

 

      

 

转载于:https://www.cnblogs.com/nankeyimeng/p/7278599.html