使用reduce解决回调

Q

在使用mapbox时在地图上添加很多图片，mapbox需要使用loadImage并在map实例中缓存这些图片。大致的操作模式如下：

map.loadImage(imgSrc1,(data,err)=>{
  if(err) throw err;
  map.addImage("img-name1",data);
  
  map.loadImage(imgSrc2,(data,err)=>{
    if(err) throw err;
    map.addImage("img-name2",data);
  })
})

当添加多个图片时就会写很多的回调。当然你也可以研究一下addImage这个方法所需参数，自行请求获取图片数据。但我这里使用reduce简化这种回调。

A

我们可以将加载图片的方法看成一个整体，每次加载下一张图片时执行上一次加载方法，然后将本次方法作为参数传入下下次，有点类似于递归。

Code

/**
 * 模拟加载图片
 * @param src 图片地址
 * @param loaded 加载完成回调
 */
function loadImage(src: string, loaded: (data: string, err?: Error) => void) {
    loaded(src);
}

/**
 * 模拟图片缓存
 */
const imgs = new Array<string>();

/**
 * 组装多次回调
 */
const loadFunc = ["1.jpg", "2.jpg"].reduce((pre, cur) => (callback: () => void) => {
    loadImage(cur, (data, err) => {
        if (err) throw err;

        // 加载到缓存
        imgs.push(data);

        // 执行上一次组装的方法
        pre(callback);
    })
}, (callback: () => void) => { callback(); })

/**
 * 执行
 * 结果 ： 
 * 2.jpg
 * 1.jpg
 */
loadFunc(() => {
    imgs.forEach(i => console.log(i));
})