Javascript 数组仅运行函数，该函数在数组的一个元素上返回一个承诺

Question

我已经发布了其他问题，但我觉得我应该简化一些事情

我有一个函数可以设置上下文并调用第二个函数在上下文中绘制线条。

我有这个：

var arr = [];

填充如下：

arr = [context,pre];

而pre 看起来像pre = [[{x:n,y:m}],[{x:j,y:k}]];

所以，基本上，我有一个数组pre，其中包含坐标数组。该数组与上下文一起被推送到arr

arr 被返回并推入最终数组，比如final_arr，现在应该是这样的：final_arr = [[context1,pre1],[context2,pre2],...]

我的目标是遍历final_arr 并在不同的上下文中画线，由数组中的context 确定。例如，第一次迭代将访问final_arr[0] 并包含context1,pre1。这两个值被发送到一个函数wrap(context, pre)，它返回一个promise。在这个wrap 函数中，调用了另一个函数animate(pre[i])。此函数获取pre 中的每个元素，它对应于一个坐标数组，并实际使用动画帧绘制线条。 animate() 也返回一个承诺。

目前，只绘制了一条路径，这似乎是因为只使用了final_arr 的一个值，即使我正在迭代它

我的迭代尝试：

final_arr.reduce((a,c) => a.then(() => wrap(c[0],c[1])), Promise.resolve());

和

var temp = Promise.resolve();
var i = 0;
for (i = 0; i < arr.length; i++){
    //window.alert(arr[i].length)
    var ct = arr[i][0];
    var line = arr[i][1];
    temp.then(() => wrap(ct,line));
}

下面是被调用的函数：

/*
*   Animation function draws a line between every point
*/              
var animate = function(p){
    return new Promise(function(resolve) {
        t = 1;
        var runAnimation = function(){
            if(t<p.length){
                context.beginPath();
                context.moveTo(p[t-1].x,p[t-1].y);
                context.lineTo(p[t].x,p[t].y);
                context.stroke();
                t++;
                requestAnimationFrame(function(){runAnimation()});
            } else {
                resolve()
            }
        };
        runAnimation();
    });
}
function wrap(ctx, lines){
    return new Promise(function(resolve) {
        var counter = 0;
        t = 1;
        var getAnimation = function(){
            if(counter < lines.length){
                context = ctx;
                lines.reduce((a, c) => a.then(() => animate(c)), Promise.resolve());
                counter++;
            } else {
                resolve()
            }
        };
        getAnimation();
    });
}

wrap中设置的context变量是js文件的全局变量

我希望以这种方式提出的问题能够明确我遇到的问题

感谢您的帮助

编辑：

尝试fiddle

编辑2：

奇怪的是，这行得通

if(final_arr.length == 1){
                    wrap(final_arr[0][0], final_arr[0][1]);
                } else if (final_arr.length == 2){
                    wrap(final_arr[0][0], final_arr[0][1]).then(wrap(final_arr[1][0], final_arr[1][1]));
                } else if (final_arr.length == 3){
                    wrap(final_arr[0][0], final_arr[0][1]).then(wrap(final_arr[1][0], final_arr[1][1])).then(wrap(final_arr[2][0], final_arr[2][1]));
                }

但是在使用这个的时候，线是同时画出来的（没关系，但不是首选）

Answer 1

edit：刚刚在wrap 的if 语句中发现了缺少的resolve => 返回的Promise 将永远不会被解决...

我建议在进行任何微优化之前先使用更简单的 wrap 版本：

function wrap(ctx, lines){
  return new Promise(function(resolve) {
    lines.forEach(p => animate(p, ctx));
    resolve();
  });
}

---

在完成所有微任务后（即在所有 Promise 之后）调用对 requestAnimationFrame 的回调 - 请参阅 When will requestAnimationFrame be executed?

所以全局变量 context 的值对于所有回调将是相同的，即多次绘制同一条线或竞争条件或其他取决于 context 内部的东西

我会摆脱全局变量，只使用函数参数和局部变量：

var animate = function(p, ctx) {
  var t ...
  ... ctx.beginPath()