[JavaScript知识库]解决回调地狱问题，包括相关知识点

回调函数是什么

一个函数作为参数传入另外一个函数，它只有在满足一定条件才可以执行，该函数就是回调函数。

异步调用是什么样子的

在本人的理解里面，js是单线程的，也就是说它必须同步执行程序中的函数，若是有部分代码需要满足一定条件才可以执行，可以暂时将它作为一个回调函数传入其他函数当中，后面的代码继续执行。

回调地狱是什么样子

为了在异步函数当中有序执行代码而进行一层层地嵌套调用函数

setTimeout(function (name) {
    var catList = name + ','
    setTimeout(function (name) {
        catList += name + ','
        setTimeout(function (name) {
            catList += name
            console.log(catList)
        }, 200, 'Lion')
    }, 200, 'Jaguar')
}, 200, 'Panther')

该代码源自引用，链接附上: link.

宏任务与微任务

宏任务与微任务的区别，最好是查阅相关的浏览器/node对它的定义规范，略有不同
在我这里呢，理解为，代码顺序执行，当遇到宏任务时，如果是立即执行的一种，则立即执行，否则的话，压入栈中；遇到微任务时，在当前宏任务执行完毕以后，将微任务队列中的任务全部有序执行，之后再次调用下一个宏任务，如此循环往复。具体如下：
1、执行一个宏任务（栈中没有就从事件队列中获取）
2、执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
3、宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
4、当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
5、渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

宏任务（目前了解有以下这些）：

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

微任务：

Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)

回调地狱的解决方式

1、采用Promise 对象，编写起来是一个同步的方法，但是，它的执行是异步的，解决的是异步的问题

function usePromise(num){
     var chony = new Promise((resolve,reject)=>{
         if(num>5){
             resolve('hello world')
         }else{
             reject('sorry,sir.')
         }          
     });
     // 记得关键一点，返回这个对象
     return chony;   // 不然的话，之后的链式调用会出现问题
 }
 usePromise(3).then(
     function (message){
         console.log(message)
     }
 )
 .catch(
     function(message){
         console.log(message);
     }
 )
 // 结果是 sorry,sir

下面是一个链式调用方式

function fn_1(){
    return  new  Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('hello world');
            resolve();     // 异步函数逻辑到这里已经结束
        },1000)
    })
}

function  fn_2(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('第二步')
            resolve();
        },1000)
    })
}

fn_1().then(res=>{
    // 返回一个promise对象,链式调用then方法
    return fn_2();
})
.then(res=>{
    return fn_1()
})
.then(res=>{
    return fn_2()
})
.then(res=>{
    setTimeout(()=>{
        console.log('完成');
    },1000)
})
结果是： hello world,第二步，hello world，第二步，完成

2、async+await 解决回调地狱
async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句

function  testAsync(list, returnVal){
    return new  Promise((resolve,reject)=>{
        setTimeout(function(name){
            var  catList = list === '' ? name:list + ',' + name
            resolve(catList)
            reject("sorry,sir")
        },200,returnVal)
    })      // 我个人感觉也是，怎么会凭空变一个变量出来，那样子实在太邪乎了
}           // 原来是setTimeout中的函数不是以前的那个样子，怪自己，没认真


function fn(list){
    return  list+','+555
}

async function render(){
    var a = await testAsync('','chony')
    var b = await testAsync(a,'doe')
    var c = await testAsync(b,'terents')
    var d = await testAsync(c,'ware')
    var e = await fn(d)
    console.log(e)  
}
render();   // 应该是返回一个字符串序列
结果： chony,doe,terents,ware,555

如果你需要单独执行js函数，果断安装node环境,便可以在vscode终端执行且查看结果了

题外话时刻，同学办事效率都是超级高的，简直了，总会让我有种落后非常多的感觉。我好奇地问了一下平哥，我总会发愁，心态不好。平哥曰，天掉下来，还有个子高的撑着，发愁什么。哈哈哈。大家都加油，文中有误的地方请不吝赐教