需要澄清回调在JavaScript中的工作方式

Question

I have hard time understanding how this callback is called:

$(function () {
        function getData(callback) {
            var now = Date.now();
            var hour = 60 * 60 * 1000;
            var temperatures = [];
            for (var k = 24; k > 0; --k) {
                temperatures.push([now - k * hour,
                    Math.random() * 2 + 10 * Math.pow((k - 12) / 12, 2)
                ]);

                }
            callback ({data: temperatures });
        }

        getData(function (data) {
            $.plot("#chart", new Array(data));
        });
    });

I am well aware what is happening in the loop just need clarification with the callback. So, the callback is just a another function and in it we are creating a method? And assigning a tempretures array to it? This part really confuses me. If "data" in the callback is a method why I cant rename it to anything else? While I can rename to anything I want the "data" argument when I am calling getData function.

Can somebody provide a more understandable version of this callback and tempretures array relationship? Thanks.

Answer 1

You are creating an object which has one property called data the value of which is an array (your temperature). This object is passed as the first parameter of callback.

getData(function (data) {
  $.plot("#chart", new Array(data));
});

Here the object is being passed in as an argument called data . As written, I don't think this will work since what you need to do is pass in the array to new Array() and not the object. So do this:

getData(function (data) {
  $.plot("#chart", new Array(data.data));
});

It's a bit easier to understand if you rename the object property:

callback ({temperatures: temperatures});

getData(function (data) {
  $.plot("#chart", new Array(data.temperatures));
});

Answer 2

A callback is a way to say, "When you're done with what you're doing, call this method."

JavaScript is single threaded, but it is asynchronous, so you may have some calls that finish before others. In these cases your code runs out of order. Callbacks are a way to ensure that a method calls another method when it's finished and actions finish as you expect.

In the case of your code, I'll annotate it as I go through:

$(function () {
    function getData(callback) { //callback is a parameter, in our case a function to     be called later

        var now = Date.now();
        var hour = 60 * 60 * 1000;
        var temperatures = [];
        for (var k = 24; k > 0; --k) {
            temperatures.push([now - k * hour,
                Math.random() * 2 + 10 * Math.pow((k - 12) / 12, 2)
            ]);

            }
        callback ({data: temperatures }); //once you've calculated temperature, call the callback method with an object that has a property called 'data' and a value that is an array.
    }

    getData(function (data) {
        $.plot("#chart", new Array(data));
    });
});

Answer 3

So, the callback is just a another function and in it we are creating a method? And assigning a tempretures array to it?

Kinda, the callback is a function, but you're not creating a method. You're calling a method and assigning the array to it.

This part really confuses me. If "data" in the callback is a method why I cant rename it to anything else?

Wrong..."data" is not a method, it's a single element object array. And you can name it whatever you want, as long as you change the name in the callback method...for example:

getData(function (newData) {
        $.plot("#chart", new Array(newData));
    });

While I can rename to anything I want the "data" argument when I am calling getData function.

You care calling getData because the for loop is in that function. You are passing the callback method as a parameter in that function to handle the data once it's calculated.