javascript - 如何正确实现javascript回调

Question

我正在尝试在我的函数中实现一个 javascript 回调。实现此目的的正确方法是什么？
调用此函数并将调用 createImage 函数。

function getImage(reportId) {
    console.log("In getImage");
    var imageData = createImage(returnImage);
};

然后我看到我的消息“In createImage done”被记录下来。但是我没有看到其他 console.log 消息出现。我没有在回调方法中看到任何消息，也没有看到“All done done done”消息。

function createImage(callback) {
    kendo.drawing.drawDOM($("#map"))
    .then(function (group) {
        return kendo.drawing.exportImage(group);
    })
    .done(function (data, callback) {
        console.log("In createImage done");
        $("#staticImage").attr("src", data);
        callback();
        console.log("All done done done");
    });
};

这是回调函数...

function returnImage(reportId, data)
{
    console.log("In returnImage");
    console.log("reportId = " + reportId);
    console.log("data = " + data);
    window.parent.buildSlideModel(reportId, data);
}

Answer 1

这里有几件事要注意，主要问题是您在 done 处理程序中重新定义了 callback，它是 undefined .当您尝试调用它时，您会收到一个错误，但该错误已被 promise 消耗掉。你需要做的是类似下面的事情:

function getImage(reportId) {
    console.log("In getImage");
    var imageData = createImage(reportId, returnImage); // pass in reportId
}

function createImage(reportId, callback) { // accept reportId and callback
    kendo.drawing.drawDOM($("#map"))
    .then(function (group) {
        return kendo.drawing.exportImage(group);
    })
    .done(function (data) { // Don't redefine callback
        console.log("In createImage done");
        $("#staticImage").attr("src", data);
        callback(reportId, data); // pass reportId and data to callback
        console.log("All done done done");
    });
}

function returnImage(reportId, data) {
    console.log("In returnImage");
    console.log("reportId = " + reportId);
    console.log("data = " + data);
    window.parent.buildSlideModel(reportId, data);
}

这里有几点要指出:

• 您需要将 reportId 传递给 createImage，以便能够将其传递给 callback。
• 你不应该在 done 函数处理程序中重新定义 callback

我建议完全避免使用回调。像下面这样的东西会起作用:

function getImage(reportId) {
    console.log("In getImage");
    return createImage()
        .then(function(data) { // use a chained-then
            console.log("Image created");
            $("#staticImage").attr("src", data);

            returnImage(reportId, data); // call to returnImage

            return data;
        });
}

function createImage() {
    return kendo.drawing.drawDOM($("#map")) // return the promise
        .then(function (group) {
            return kendo.drawing.exportImage(group);
        });
}

function returnImage(reportId, data) {
    console.log("In returnImage");
    console.log("reportId = " + reportId);
    console.log("data = " + data);
    return window.parent.buildSlideModel(reportId, data);
}

我不是 100% 确定您的需求是什么，因为您将函数命名为 returnImage，但它似乎正在调用 window.parent.buildSlideModel 实际上并没有返回任何东西。如果那确实是真的，上面的代码仍然会完成你所需要的。如果您将函数命名为 getImage，那么您可能希望该函数实际返回图像数据(或数据 promise )。我已经在上面的代码中为您完成了。