js解决异步问题

抛出问题

给出下面这段代码：

function getData(){
    setTimeout( () =>{
        var name = '张三'
        return name
    },1000)
}
getData()

控制台会输出什么？
我们先分析，当调用getData()后，因为setTimeout是一个异步函数，不会同步跟随getData函数进行执行，所以当getData(){}结束后并没有拿到返回值，调用函数得到的放回值是undefined

看下面的代码

function getData(){
    setTimeout( () =>{
        var name = '张三'
    },1000)
    return name
}
getData()

控制台会输出什么？
我们分析，var name 创建这个变量是异步的，所以getData函数调用后没有创建出一个name，这时执行return name时相当于返回一个未定义的变量，控制台会报错

接着看下面的代码

function getData( fun ){
    setTimeout( () =>{
        var name = '张三'
        fun(name)
    },1000)
}
getData( (canshu) => {
	console.log(canshu)
})

控制台会输出什么？
我们分析：在getData函数中我们传入了一个方法fun作为参数，在JavaScript中是可以进行这种操作的。在setTimeout中我们调用这个函数，将需要传递的数据作为参数传递进去。当我们调用这个getData函数时，我们也传递一个方法进去，代码案例中我们用箭头函数创建一个匿名函数作为参数，然后给一个参数，将这个参数打印出来，这个参数就是我们需要的数据name。但是这个结果会有一个1s延迟。

我们再看看下面的代码

function getData(resolve,reject){
    setTimeout( () => {
        var name = '张三'
        resolve(name)
    },1000)
}
var p = new Promise(getData)
p.then( (data) =>{
    console.log(data);
})

控制台会输出什么？
我们分析：再getData函数中，我们传递两个方法参数进去，在setTimeout函数中调用resolve函数，将需要传递的参数给进去。然后使用Promise对象构造一个实例，在构造中将getData函数传递进去，然后p.then( ()=>{})就给出了resolve方法的实现

再看看下面的代码

var p = new Promise((resolve,reject) =>{
	setTimeout( () => {
		var name = '张三'
		resolve(name)
	}
},1000)
}).then((data)=>{
	console.log(data)
})

控制台会输出什么？
这段代码跟上面的promise的使用没有本质区别，是一种简写形式