【JS】回调函数/事件回调的使用

1. 什么是回调函数？作用是什么？

在 JavaScript 中，函数是对象。因此，函数可以将函数作为参数，并且可以由其他函数返回。执行此操作的函数称为高阶函数。任何作为参数传递的函数都称为回调函数。回调函数就是一个被作为参数传递的函数。

在C语言中，回调函数只能使用函数指针实现，在C++、Python、ECMAScript等更现代的编程语言中还可以使用仿函数或匿名函数。

回调就是一种方法，帮我们确保某些代码直到另一些代码已经执行完毕后才执行—常用于异步编程。
首先js处理异步的几种方式：1、回调函数 2、promise 3、async await。
在JS中异步编程只有四种情况:

1. 定时器都是异步编程的
2. 所有的事件都是异步编程的
3. Ajax读取数据的时候, 我们一般都设置为异步编程
4. 回调函数也都是异步编程的

2.使用方法

程序员最熟悉的思维模式是这样的：

1. 调用某个函数，获取结果
2. 处理获取到的结果

res = request();
handle(res);

这就是函数的同步调用，只有request()函数返回拿到结果后，才能调用handle函数进行处理，request函数返回前我们必须等待，这就是同步调用，其控制流是这样的：

但是如果我们想更加高效的话，那么就需要异步调用了，我们不去直接调用handle函数，而是作为参数传递给request：

request(handle);

我们根本就不关心request什么时候真正的获取的结果，这是request该关心的事情，我们只需要把获取到结果后该怎么处理告诉request就可以了，因此request函数可以立刻返回，真的获取结果的处理可能是在另一个线程、进程、甚至另一台机器上完成。

这就是异步调用，其控制流是这样的：

从编程思维上看，异步调用和同步有很大的差别，如果我们把处理流程当做一个任务来的话，那么同步下整个任务都是我们来实现的，但是异步情况下任务的处理流程被分为了两部分：

1. 第一部分是我们来处理的，也就是调用request之前的部分
2. 第二部分不是我们处理的，而是在其它线程、进程、甚至另一个机器上处理的。
   我们可以看到由于任务被分成了两部分，第二部分的调用不在我们的掌控范围内，同时只有调用方才知道该做什么，因此在这种情况下回调函数就是一种必要的机制了。

也就是说回调函数的本质就是“只有我们才知道做些什么，但是我们并不清楚什么时候去做这些，只有其它模块才知道，因此我们必须把我们知道的封装成回调函数告诉其它模块”。回调函数和我们的主程序位于同一层中，我们只负责编写该回调函数，但并不是我们来调用的。

文件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);
    }

https://www.zhihu.com/question/19801131
https://www.cnblogs.com/moxiaowohuwei/p/8438236.html