如何正确实现javascript回调

Question

我试图在我的函数中实现一个javascript回调。 完成此任务的正确方法是什么？
调用此函数并调用createImage函数。

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

然后我看到我的消息“在createImage完成”记录。 但是，我没有看到其他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 。 当您尝试调用它时会出现错误，但承诺会消耗该错误。 你需要做的是如下：

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);
}

我不是百分之百确定你的需求，因为你命名一个函数returnImage ，但它似乎是调用window.parent.buildSlideModel而不是实际返回任何东西。 如果确实如此，上面的代码仍然可以满足您的需求。 如果您将函数命名为getImage那么您可能希望该函数实际返回图像数据（或数据的承诺）。 我已经在上面的代码中为你完成了这个。