Completly confused with jQuery and Callbacks

Question

so I want a simple script, that shows, whether a user is online at twitch or not. I'm familiar with coding in general, but I have never really dealt with Callbacks. So this is my basic code.

jQuery(document).ready(function(){

    var streamLink = 'http://api.justin.tv/api/stream/summary.json?channel=ReasNSC2&jsonp=?';

    $.getJSON(streamLink, function(a) {
        if (a.viewers_count != "0")
        {
            alert(true)
        }else {
            alert(false)
        };
    });
});

The code above works fine. I got the expected result. So now I want to use the result in my code. So my first thought is: Let's use return statments.

 jQuery(document).ready(function(){
    alert(getStatus())
});
    function getStatus()
    {
        var streamLink = 'http://api.justin.tv/api/stream/summary.json?channel=ReasNSC2&jsonp=?';

        $.getJSON(streamLink, function(a) {
            if (a.viewers_count != "0")
            {
                return(true)
            }else {
                return(false)
            };
        });
    }

So I "created" this. Won't work. I found many explanations on the internet and on stackoverflow but I couldn't extract something really helping me. Can someone give me a helping hand with this basic question?

I want to do the request and then proceed with it. Big thanks in advance :)

@FelixKling do you get all of your rep by pointing people at that question? ;-) — Alnitak, Sep 02 '13 at 09:30

score 1 · Answer 1 · answered Sep 02 '13 at 09:16

1

It's because you're in a callback, you need to use a callback function in order to send the value to. Something like:

function getStatus()
{
    var returnValue;
    var streamLink = 'http://api.justin.tv/api/stream/summary.json?channel=ReasNSC2&jsonp=?';

    $.getJSON(streamLink, function(a) {
        if (a.viewers_count != "0") {
            returnFunction(true);
        }
        else {
            returnFunction(false);
        };
    });
}

function returnFunction(value)
{
    //do something with your value.
}

answered Sep 02 '13 at 09:16

Mathew Thompson

55,877
15
127
148

1

still it won't work becase it is inside a async callback – Arun P Johny Sep 02 '13 at 09:17
@ArunPJohny You're right, updated. – Mathew Thompson Sep 02 '13 at 09:20

score 1 · Accepted Answer · answered Sep 02 '13 at 09:27

You are already using callbacks in your code, for example:

$.getJSON(streamLink, function(a) {... //where function(a) is the anonymus callback function

If you add a callback function as an argument to your 'getStatus' function like:

function getStatus(callback){
  $.getJSON(streamLink, function(a) {
    if (a.viewers_count != "0") {
      callback(true);
    } else {
      callback(false);
    };
  });
}

And call on it like:

jQuery(document).ready(function(){
  getStatus(function(result){ alert(result); });
  //or even in this case you could just add the 'alert' as the callback:
  getStatus(alert);
});

score 0 · Answer 3 · answered Sep 02 '13 at 09:19

You need to do something like

jQuery(document).ready(function () {
    getStatus(function (status) {
        alert(status)
    })
});

function getStatus(callback) {
    var streamLink = 'http://api.justin.tv/api/stream/summary.json?channel=ReasNSC2&jsonp=?';

    function callCallback(result) {
        if ($.isFunction(callback)) {
            callback(result)
        }
    }

    $.getJSON(streamLink, function (a) {
        if (a.viewers_count != "0") {
            callCallback(true)
        } else {
            callCallback(false)
        };
    });
}

Completly confused with jQuery and Callbacks

3 Answers3