如何在javascript中异步调用一个函数

JavaScript014

如何在javascript中异步调用一个函数,第1张

function async () {}

setTimeout(function(){

    async()

}, 1000)

上面就是异步调用一个函数。

js里的异步函数有很多, 除了setTimeout和setInterval 还有bind以及很多事件绑定和监听都属于异步操作。

var xmlHttp

function createXMLHttpRequest(){

//Mozilla 浏览器(将XMLHttpRequest对象作为本地浏览器对象来创建)

if(window.XMLHttpRequest){ //Mozilla 浏览器

xmlHttp = new XMLHttpRequest()

}else if(window.ActiveXObject) { //IE浏览器

//IE浏览器(将XMLHttpRequest对象作为ActiveX对象来创建)

try{

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")

}catch(e){

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")

}catch(e){}

}

}

if(xmlHttp == null){

alert("不能创建XMLHttpRequest对象")

return false

}

}

//用于发出异步请求的方法

function sendAsynchronRequest(url,parameter,callback){

createXMLHttpRequest()

if(parameter == null){

//设置一个事件处理器,当XMLHttp状态发生变化,就会出发该事件处理器,由他调用

//callback指定的javascript函数

xmlHttp.onreadystatechange = callback

//设置对拂去其调用的参数(提交的方式,请求的的url,请求的类型(异步请求))

xmlHttp.open("GET",url,true)//true表示发出一个异步的请求。

xmlHttp.send(null)

}else{

xmlHttp.onreadystatechange = callback

xmlHttp.open("POST",url,true)

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

xmlHttp.send(parameter)

}

}

//以上代码是通用的方法,接下来是调用以上的方法

function loadPros(title,count,pid,cid,level){

// 调用异步请求方法

url = "。。。。。。。。"

sendAsynchronRequest(url,null,loadCallBack)

}

// 指定回调方法

function loadCallBack(){

try

{

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

if(xmlHttp.responseText != null &&xmlHttp.responseText != ""){

var divProid = document.getElementById('videolist')

divProid.innerHTML = xmlHttp.responseText

for(i=0i<leni++)

{

var video_url = document.getElementById("videolist"+i+"").href

if(video_url != undefined &&video_url != null &&video_url != ""){

window.location.href = video_url

}

}

}

}

}

if (xmlHttp.readyState == 1)

{

//alert("正在加载连接对象......")

}

if (xmlHttp.readyState == 2)

{

//alert("连接对象加载完毕。")

}

if (xmlHttp.readyState == 3)

{

//alert("数据获取中......")

}

}

catch (e)

{

//alert(e)

}

}

按照js同步执行的顺序,函数调用会首先执行for循环,循环5次开启了5个延迟器,延时器内部的回调函数将会异步执行,会在延时1s后进入消息队列等待执行。循环了5次,所以此时i的值为5,然后同步执行console.log打印5,第一次同步执行结束,然后开始执行消息队列的异步任务,打印5个5,中间的undefined是函数调用无返回值返回的。

执行顺序和第一题相同,不同的是延时器被包裹在了一个立即执行函数内容,并把每一次循环的i作为参数传入,此时循环内部的函数形成了一个私有作用域,每一次的i变量被独立保存了起来,因此每一次循环的i的值都会被打印出来。

延时器内部回调函数是异步函数,将在延时结束后,进入消息队列等待执行,因此同步的console.log("CCCC")最优先执行,然后延时0ms的延时器的回调先进入消息队列,1000ms后第一个延时器的回调再进入消息队列等待执行,因此先执行0ms的回调打印DDDD,再执行1000ms的回调打印BBBB。

这里与上一题不同的是中间多了一个执行3s的同步while循环,因此执行顺序是这样的:

第一个延时器延时1s后内部异步回调函数进入消息队列等待执行,

等待while循环3s后打印"CCCC",

循环结束后第一个延时器内部的回调已经进入消息队列第一个执行位置等待执行。

第二个延时器延时0s后内部异步回调函数进入消息队列等待执行,延时结束后排到第一个延时器的回调函数后面,

因此异步队里内部先打印"BBBB",再打印"DDDD"