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

这里需要注意的一些事项，主要问题是您要在callback处理程序中重新定义done，它是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。
您不应在callback函数处理程序

done

我建议完全避免使用回调。以下内容将起作用：

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，那么您可能希望该函数实际返回图像数据（或数据的承诺）。我已经在上面的代码中为你完成了这个。

如何正确实现javascript回调

1 个答案: