How to correctly implement a javascript callback

Question

I am trying to implement a javascript callback in my function. What is the proper way to accomplish this?
This function is called and will call the createImage function.

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

I then see my the message "In createImage done" logged. However I do not see an other console.log messages occur. I don't see any of the messages in the callback method, nor do I see "All done done done" message.

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

This is the callback function...

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

You need to pass the reportId and data values to the callback function, wherever you get them from. — Rory McCrossan
– Rory McCrossan, Commented Dec 29, 2015 at 14:42
Just remove callback from .done(function (data, callback) { — jcubic
– jcubic, Commented Dec 29, 2015 at 14:45
I see you are using promises. Using call back such way is not a promise way :). createImage should return promise itself. After that you can call returnedPromise.then(callback(reportId, data)) — Oleksandr Papchenko
– Oleksandr Papchenko, Commented Dec 29, 2015 at 14:48
I originally had callback(13,data) (still didnt work), however I removed the parameters prior to sending this example. — John Doe
– John Doe, Commented Dec 29, 2015 at 14:49

wjohnsto · Accepted Answer · 2015-12-29 15:27:51Z

A couple of things to note here, the primary problem is that you are redefining callback in your done handler, and it is undefined. When you try to call it you get an error, but that error is consumed by the promise. What you need to do is something like the following:

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

Some things to point out here:

You need to pass reportId through to createImage in order to be able to pass it to the callback.
You should not redefine callback in the done function handler

I would recommend avoiding using callbacks altogether. Something like the following will work:

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

I'm not 100% sure on what your needs are, since you name a function returnImage, but it appears to be making a call to window.parent.buildSlideModel and not actually returning anything. If that is indeed true, the above code will still accomplish what you need. If you name a function getImage then you might want that function to actually return the image data (or a promise of the data). I have done that for you in the above code.

This does correct my issue. However is this the best practice for handling a callback in a promise?
I edited my solution with one that does not use a callback, but instead uses promises. You can learn a little more about how they work here: html5rocks.com/en/tutorials/es6/promises

Collectives™ on Stack Overflow

How to correctly implement a javascript callback

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related