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

JavaScript010

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中的异步操作:

1、定时器都是异步操作

2、事件绑定都是异步操作

3、AJAX中一般我们都采取异步操作(也可以同步)

4、回调函数可以理解为异步(不是严谨的异步操作)

上面的callback()方法是参数传入的,当然需要你在外部定义一个函数。

回调函数,就是当加载完成后,可以进行下一步操作的函数。

举个简单的例子:

登陆操作,当输入用户名和密码进行登陆后,发送一个异步请求至服务端,来验证是否为合法用户。

假如服务端的验证方法,返回一个true|false的布尔值。

客户端脚本中在得到服务端的响应后,就可以进入回调函数。

那么在回调函数中,可以根据这个返回值,进行相应的操作。比如,true的话,跳转到主页面;false的话,重新定位到登陆页面。

回调函数在ajax中还是很有用的。