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

JavaScript07

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)

})

拥抱ES6,替代回调函数,解决回调地狱问题

话说EcmaScript Harmony (ES6)给js引入了不少新特性,对ES6不太了解的同学,可以自行百度一下。

在nodejs中使用ES6的新特性,需要用v0.11.x以上的版本才行。

本文介绍的是使用Generator特性替代回调函数,对Generator不了解?可以看看这里。

这里用到了co和thunkify两个模块,大家使用npm install命令安装之。

启动时,为了让nodejs支持ES6的特性,需要附加--harmony参数,如:node --harmony index.js

还是以本文刚开始提到的问题为例,使用generator特性的实例代码如下:

var fs = require('fs')

, co = require('co')

, thunkify = require('thunkify')

var readFile = thunkify(fs.readFile)

co(function *() {

var test1 = yield readFile('test1.txt')

var test2 = yield readFile('test2.txt')

var test = test1.toString() + test2.toString()

console.log(test)

})()

处理代码中的异常也是很简单的,只需要这样就OK了:

try {

var test1 = yield readFile('test1.txt')

} catch (e) {

// 在这里处理异常

}

这个就是回调函数的概念了

回调函数:把一个函数作为参数传递到其他的函数里面,这个被传入的函数,就是回调函数。

例如:html5 canvas显示加载图片,开始的时候图片没有加载,但是又要获取他的width,height,于是写个回调函数传入img的onload方法里面,就可以了

这个类似:

隐式调用的匿名函数

function (searchResult) {...}

就是个回调函数

传入到了localSearch的setSearchCompleteCallback方法中,作为参数。

也就是说这个本来是最后才有的,所以才是先执行了那个alert,这个就是回调了