1、JavaScript(JS) 运行机制

JS 是单线程运行的，也就是两段代码不能同时运行，而是必须逐步地运行，所以在同步代码执行过程中，异步代码是不执行的。只有等同步代码执行结束后，异步代码才会被添加到事件队列中。这里就涉及到执行栈和任务队列：

同步代码是依次存放在执行栈中，遵循LIFO原则；

异步代码存放在任务队列中，任务队列又分宏任务和微任务（微任务执行优先级高于宏任务），遵循FIFO原则；

例如，

function foo(){
    console.log('start...');
    return bar();
}
function bar(){
    console.log('bar...');
}
//这里采用ES6的箭头函数、Promise函数
var promise = new Promise(function(resolve,reject){
    console.log('promise...');
    resolve();
});
promise.then(()=>console.log('promise resolve...'));
setTimeout(()=>console.log('timeout...'),0);
foo()
console.log('end...');

输出结果：

promise...
start...
bar...
end...
promise resolve...
timeout...

2、异步编程常用实现方式

JavaScript(JS)异步编程常用实现方式有，常用的定时器、ajax、Promise、Generator、async/await。

1）定时器

使用setTimeout()与setInterval()定时器来实现异步。

例如，

console.log( "a" );
setTimeout(function() {
console.log( "c" )
}, 500 );
setTimeout(function() {
console.log( "d" )
}, 500 );
setTimeout(function() {
console.log( "e" )
}, 500 );
console.log( "b" );

或者

(function(i){// 闭包
        var countDown;
        // 对按钮进行操作
        function change(i) {
            var text = "我同意";
            if (i > 0) {
                text += "（" + i + "秒）";
            } else {
                $(':button').prop('disabled', false);
                // 不再调用
                clearInterval(countDown);
            }
            $(':button').val(text);
        };
        // 页面加载完毕执行
        $(function(){
            // 计时器（1秒调用一次）
            countDown = setInterval(function () {
                change(i);
                i--;
            }, 1 * 1000);// 1000毫秒
        });
    })(60);// 60s

2）异步AJAX

XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调.

例如，

(function(){
            var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            var url = "authorInfo.json";
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState==4){
                    if(xmlhttp.status==200){
                        console.log(xmlhttp.response);
                        //异步获取数据后再doSomething
                    }
                }
            }
            xmlhttp.open('GET',url,true);
            xmlhttp.send(null);
        })();

3）使用Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

例如，

const p = function(){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('Refused the request!');
        },0);
    })
};
const p2 = function(){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(p())
        },0);
    })
};
p2().then(val => {
    console.info('Status switches to fulfilled');
    console.info(val);
}, val => {
    console.info('Status switches to reject');
    console.info(val);
});
// 输出 "Status switches to reject"
// 输出 "Refused the request!"

4）Generator

Generator 顾名思义是生成器， 使用 function* 语法和一个或多个 yield 表达式以创建一个函数即为生成器，当然它的返回值就是一个迭代器即生成器。

例如，

function* gen(x){
  var y = yield x + 2;
  return y;
}

Generator语法 function* name(){},一般*和函数名中间有个空格，函数体内可通过yield关键字修饰，需要注意的是，yield后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行。

5）async/await

带async关键字的函数，是声明异步函数，返回值是Promise对象，如果async关键字函数返回的不是Promise，会自动用Promise.resolve()包装。await等待右侧表达式的结果，这个结果是Promise对象或者其他值。如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是返回的值。

如果它等到的是一个 Promise 对象，await 就会执行，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

例如，

function myFun() {
    return new Promise(resolve => {
        setTimeout(() => resolve("cjavapy"), 2000);
    });
}
async function runAsync() {
    const result = await myFun();
    console.log(result);
}
runAsync();
console.log('end');