Javascript array only running function返回对数组的一个元素的 promise

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。这两个值被发送到返回 promise 的函数 wrap(context, pre)。在这个 wrap 函数中，调用了另一个函数，animate(pre[i])。此函数获取 pre 中的每个元素(对应于一个坐标数组)，并实际使用动画帧绘制线条。 animate() 也返回一个 promise 。

目前，只有一条路径被绘制，这似乎是因为只有 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

编辑:刚刚在 wrap 的 if 语句中发现了缺少的 resolve => 返回的 Promise 将永远无法解决...

我建议在进行任何微优化之前从一个更简单的 wrap 版本开始:

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

---

requestAnimationFrame 的回调在完成所有微任务后调用(即在所有 Promises 之后)- 参见 When will requestAnimationFrame be executed?

因此全局变量 context 的值对于所有回调都是相同的，即同一行多次绘制或竞争条件或取决于 context 内部的东西

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

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