1. 什么是回调函数?作用是什么?
在 JavaScript 中,函数是对象。因此,函数可以将函数作为参数,并且可以由其他函数返回。执行此操作的函数称为高阶函数。任何作为参数传递的函数都称为回调函数。回调函数就是一个被作为参数传递的函数。
在C语言中,回调函数只能使用函数指针实现,在C++、Python、ECMAScript等更现代的编程语言中还可以使用仿函数或匿名函数。
回调就是一种方法,帮我们确保某些代码直到另一些代码已经执行完毕后才执行—常用于异步编程。
首先js处理异步的几种方式:1、回调函数 2、promise 3、async await。
在JS中异步编程只有四种情况:
- 定时器都是异步编程的
- 所有的事件都是异步编程的
- Ajax读取数据的时候, 我们一般都设置为异步编程
- 回调函数也都是异步编程的
2.使用方法
程序员最熟悉的思维模式是这样的:
- 调用某个函数,获取结果
- 处理获取到的结果
res = request();
handle(res);
这就是函数的同步调用,只有request()函数返回拿到结果后,才能调用handle函数进行处理,request函数返回前我们必须等待,这就是同步调用,其控制流是这样的:
但是如果我们想更加高效的话,那么就需要异步调用了,我们不去直接调用handle函数,而是作为参数传递给request:
request(handle);
我们根本就不关心request什么时候真正的获取的结果,这是request该关心的事情,我们只需要把获取到结果后该怎么处理告诉request就可以了,因此request函数可以立刻返回,真的获取结果的处理可能是在另一个线程、进程、甚至另一台机器上完成。
这就是异步调用,其控制流是这样的:
从编程思维上看,异步调用和同步有很大的差别,如果我们把处理流程当做一个任务来的话,那么同步下整个任务都是我们来实现的,但是异步情况下任务的处理流程被分为了两部分:
- 第一部分是我们来处理的,也就是调用request之前的部分
- 第二部分不是我们处理的,而是在其它线程、进程、甚至另一个机器上处理的。
我们可以看到由于任务被分成了两部分,第二部分的调用不在我们的掌控范围内,同时只有调用方才知道该做什么,因此在这种情况下回调函数就是一种必要的机制了。
也就是说回调函数的本质就是“只有我们才知道做些什么,但是我们并不清楚什么时候去做这些,只有其它模块才知道,因此我们必须把我们知道的封装成回调函数告诉其它模块”。回调函数和我们的主程序位于同一层中,我们只负责编写该回调函数,但并不是我们来调用的。
文件1-space.component.ts
// 地图点击事件
this.mapLocationComponent.addMapClickEvent(this, this.loadBuildByPoint);
// 根据坐标点,查询周边建筑
loadBuildByPoint(self, evt) {
// 缓冲模式下查看点的信息
if (!self.bufferFlag && evt.features) {
let data = evt.features[0].getProperties().data;
self.selectInfo(data);
}
// 非缓冲模式下使用兴趣点
if (!self.drawType && !self.analysisHistoryFlag && self.zoom < 16) {
self.commonLoading = false;
let params = {
longitude: evt.coordinate[0] + '',
latitude: evt.coordinate[1] + '',
type: self.selectedTypes
};
// self.interestPoint(params);
// this.mapLocationComponent.clearOverlays();
}
}
文件2-map-location.component.ts
// 鼠标点击事件
addMapClickEvent(context , callback, map: any = null) {
this.qkMapComponent.addMapClickEvent(context , callback, map);
}
文件3-qk-map.ts
public addMapClickEvent(context, callback, map: any = null) {
let that = this;
let mapCore = map === null ? this.mapcore : map;
this.mapClickHandler = function (evt) {
let coordinate = evt.coordinate;
let features = mapCore.getFeaturesAtPixel(evt.pixel);
let zoom = evt.map.getView().getZoom();
callback(context, {'coordinate': coordinate, 'features': features, 'zoom': zoom});
};
mapCore.on('click', this.mapClickHandler);
}