js回调函数如何实现异步,给一个例子

JavaScript08

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)

})

按照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"

this关键字指向调用它的对象,test()是在GLOBAL中调用,而且异步函数回调应该形成了闭包,回调函数中的this也应该指向GLOBAL对象,而至于为啥this.vall是undefined,则是因为用var申明的变量都是局部变量,并不是GLOBAL变量的属性。

好好去看看javascript中this关键字指的对象和闭包的概念吧。希望能帮到你