js下多个异步函数,怎么获取最终结果?

JavaScript09

js下多个异步函数,怎么获取最终结果?,第1张

异步处理不用阻塞来等待处理完成,而是允许后续操作,直至其程序将处理完成,并回调通知此函数

那么在js中有如下几种异步方式:

示例1

var async=function(callback){

//read data

setTimeout(function(){

callback('data')

},1000)//1秒后回调

}

//使用

async(function(data){

alert(data)

})

示例2

var async=function(callback){

var xhr=new XMLHttpRequest()

xhr.open('get','.',true)

xhr.onreadystatechange=function(){

callback(xhr.readyStatus)

}

xhr.send()

}

async(function(data){

alert(data)

})

示例3

var async=function(callback){

var img=new Image()

img.onload=img.onerror=function(){

callback(img)

}

img.src='x.jpg'

}

async(function(data){

alert(data)

})

var bb = "" //声明一个变量//getval(参数1,回调函数名)//执行函数aa.val(0,getval)//回调函数getval(v){ bb=v//在这里赋值 alert(v)}

表面上来看,你写的完全没有问题。

但是实际上你是出了问题,那么原因可能就是

第一:如果是服务器拿到数据再渲染到页面来的话,可能是数据渲染没有完成,但是js已经执行了,这是异步问题,异步问题用callback来解决,取到再来获取,例如下面这样,用一个callback来简单解决。只有通过ajax取到值以后才执行callback。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

 

<script>

function checkHtmlFile(fileName, callback) {

var xml = new XMLHttpRequest()

xml.open('GET', fileName, false)

xml.send()

callback(xml)

}

checkHtmlFile('b.html',function(doc) {

if (doc.status === 200&& doc.statusText === 'OK') {

alert('OK')

} else {

alert('NO')

}

})

</script>

 

 

</body>

</html>

第二:还是异步问题,js在浏览器运行的时候,js被执行了,但是下面的html在js后面。js取不到id的。只有加上DOMContentLoaded或window.onload之类的事件来判断html的dom是不是加载完成了。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<script>

window.addEventListener('DOMContentLoaded', function() {

var pageNum = document.getElementById('pageNum').value

var maxPage = document.getElementById('maxPage').value

alert("弹出:" + pageNum)

alert("弹出:" + maxPage)

})

</script>

<input type="text" id="pageNum" name="pageNum" value="我是pageNum的value" />

<input type="text" id="maxPage" name="maxPage" value="我是maxPage的value" />

</body>

</html>