Question

我正在运行一个动画，该动画将销钉固定在某个点，然后绘制一条路径。当前，当引脚掉落时，未绘制任何路径。这是因为功能next_code未被运行

目前我有这个：

function drawPath(source, desti, isUpper, first, last, arr) {
    var context;
    /*
     * Define context
     */
    //lower
    if (!isUpper) {
        var c = document.getElementById("myCanvas");
        context = c.getContext("2d");
        //upper
    } else {
        var cUpr = document.getElementById("myCanvasUpr");
        context = cUpr.getContext("2d");
    }

    context.lineCap = 'round';
    context.beginPath();

    /*
     * Get the coordinates from source and destination strings
     */
    var src = dict[source];
    var dst = dict[desti];

    /*
     * Get the point number of the point on the path that the source and destination connect to
     */

    var begin = point_num[source];
    var finish = point_num[desti];

    /*
     *   Marker
     */
    if (first) {
        var pause = true;
        var marker1 = new Image();
        return new Promise(function(resolve, reject) {
            marker1.onload = resolve;
            marker1.onerror = reject;
            marker1.src = "images/map_pin.png";
        }).then(function() {
            return animate_pin(marker1, context, point_coord[begin[0]])
        }).then(next_code);

    } else {
        context.fillStyle = 'green';
        context.beginPath();
        context.arc(point_coord[begin[0]][0], point_coord[begin[0]][1], 8, 0, 2 * Math.PI);

        context.strokeStyle = "green";
        context.stroke();
        context.fill();
    }
    var next_code = function() {
        console.log("In next_code");
        if (last) {
            /*var marker2 = new Image();
            marker2.onload = function(){
                marker2._x = point_coord[finish[0]][0]-15;
                marker2._y = point_coord[finish[0]][1]-22;
                context.drawImage(marker2, marker2._x, marker2._y,marker2.width,marker2.height);
            };
            marker2.src = "images/x_marks.png";*/
        } else {
            context.fillStyle = 'red';
            context.beginPath();
            context.arc(point_coord[finish[0]][0], point_coord[finish[0]][1], 6, 0, 2 * Math.PI);

            context.strokeStyle = "#ff0000";
            context.stroke();
            context.fill();
        }

        /*
         * Call the function that draws the entire path
         */
        draw_segments(begin, finish, src, dst, context, arr);
        //window.alert(JSON.stringify(vertices, null, 4))
        /*
         * Edit what the line looks like
         */
        context.lineWidth = 5;
        //context.strokeStyle = "#ff0000";
        //context.strokeStyle = "#ff3c3c";
        context.strokeStyle = "#f38f1d";
        context.stroke();
    }
}

这里的动画功能是

function animate_pin(marker1, context, end){
    return new Promise(function(resolve) {
        var temp = end.slice(0);
        temp[0] = temp[0] - 1;
        temp[1] = temp[1] - 44;
        var start = temp.slice(0);
        start[0] = start[0] + 50;
        start[1] = start[1] - 50;
        var inc = 0.5;
        console.log(temp[0]);
        var runAnimation2 = function(){
            if(start[0] > temp[0]){
                console.log(start[0]);
                context.clearRect(0, 0, context.canvas.width, context.canvas.height);
                context.drawImage(document.getElementById('frame1'), 0, 0);
                start[0] = start[0] - inc;
                start[1] = start[1] + inc;
                marker1._x = start[0];
                marker1._y = start[1];
                context.drawImage(marker1, marker1._x, marker1._y,marker1.width,marker1.height);
                requestAnimationFrame(runAnimation2);
            } else {
                console.log("Hello");
                resolve();
            }
        };
        runAnimation2();
    });
}

最终，我需要arr在draw_segments中进行更新，并且我需要animate_pin在draw_segments开始之前运行并完成。我认为诺言将是一个良好的开端，但确实是在遇到问题的时候。

是否有更好的方法来使animate_pin在运行draw_segments之前完成？如果没有，如何让draw_segments以当前设置运行？

注意：console.log函数中的animate_pin可以正常工作，但是console.log函数中的next_code从未运行

Answer 1

这是问题

在使用gradle refresh的地方，它是next_code-由于变量提升，因此变量undefined的声明被提升到了函数的顶部，但是没有定义它-因此是next_code

因为undefined-定义从不执行！

但是，函数定义被悬挂-因此，下面的代码将起作用

return new Promise

或者，您可以将var next_code变量移至使用位置上方

if (first) {
    var pause = true;
    var marker1 = new Image();
    return new Promise(function(resolve, reject) {
        marker1.onload = resolve;
        marker1.onerror = reject;
        marker1.src = "images/map_pin.png";
    }).then(function() {
        return animate_pin(marker1, context, point_coord[begin[0]])
    }).then(next_code);

} else {
//... snip
}

function next_code() {
    console.log("In next_code");
    // ... etc
}

您可能会问自己“为什么没有错误？”

因为，如果您将函数以外的任何内容作为参数传递给var next_code = function() { console.log("In next_code"); // ... etc }; if (first) { var pause = true; var marker1 = new Image(); return new Promise(function(resolve, reject) { marker1.onload = resolve; marker1.onerror = reject; marker1.src = "images/map_pin.png"; }).then(function() { return animate_pin(marker1, context, point_coord[begin[0]]) }).then(next_code); } else { //... snip }-它会被默默地忽略-这在链接Promises时是有用的行为，但它会引起有趣的WTF时刻：p

JavaScript承诺不会在then（）

1 个答案: