Proper javascript functions structure

Question

I'm getting data from my firebase

//user balance check
var balanceRef = new      Firebase('https://****.firebaseIO.com/arcade/grabbit/'+category+'/'+brand+'/'+gameId+'/'+'activePlayers'+'/'+userId+'/');

Here's the function that gets the data

//check user balance
function checkBalance(){
balanceRef.on('value', function(snapshot) {
if(snapshot.val()=== null){
  mLeft=0
 } else{
 mLeft=snapshot.val().tokensLeft
        }
 return mLeft 
                             })
 }

When the user clicks a button I 1st check their balance

$('#grabbit').click(function() {

 //call checkBalance function on click
 var myTokensLeft=checkBalance();

 });

the problem here is it's returning the function value as NaN or undefined

I've tested repeated, the function does return a value. Why can't It pick up the value on click? Am I doing something wrong with the structure. I'm very new to javascript

Tibos- tokensLeft is there, works fine when I test it outside a function. — user2320607
– user2320607, Commented Oct 4, 2013 at 15:46
you need to trigger first the event value on your balanceRef element. if it's not triggered your function is not executing. — webduvet
– webduvet, Commented Oct 4, 2013 at 15:48

lordvlad · Accepted Answer · 2013-10-04 16:16:20Z

4

balanceRef.on looks like an async function to me, which is why you won't get a return value. try something like this:

//check user balance
function checkBalance(callback){
  balanceRef.on('value', function(snapshot) {
    if(snapshot.val()=== null){
      mLeft=0
    } else{
      mLeft=snapshot.val().tokensLeft
    }
    callback(mLeft);
  })
}


$('#grabbit').click(function() {

  //call checkBalance function on click
  checkBalance(function(myTokensLeft){

  // do something with myTokensLeft

  });   

});

EDIT: more details

the function balanceRef.on does not return your desired data, it only attaches the function function(snapshot)... to the object balanceRef's value event. When the object balanceRef's value event gets triggered (i.e. data is available), your function function(snapshot)... gets executed, but it's return values goes nowhere, because the javascript parser has already moved on.

try this:

function checkBalance(){
  balanceRef.on('value', function(snapshot){
    return 'foo';
  });  
  return 'bar';
}

$('#grabbit').click(function(){

  console.log(checkBalance());
  // this will print 'bar' in your
  // in your console, not 'foo'
});

EDIT 2: to avoid callback chaining, one can use a variable that will be common to both functions. (not a very good practice though, since you cannot be sure that the value has been set, when you want it!)

(function(){
  // added the closure to avoid myTokensLeft cluttering 
  // into global variables

  var myTokensLeft;

  balanceRef.on('value', function(snapshot){
    var mLeft;
    if (snapshot.val()=== null){
      mLeft=0
    } else{
      mLeft=snapshot.val().tokensLeft
    }
    myTokensLeft = mLeft;
  });

  $('#grabbit').click(function(){

    // do something with myTokensLeft

  });

}());

edited Oct 4, 2013 at 16:16

answered Oct 4, 2013 at 15:45

lordvlad

5,3872 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2320607 Over a year ago

Dvlad thanks for your answer. I need the value of the function. I can't put the rest of the click call inside the checkBalance(function (myTokensLeft){

lordvlad Over a year ago

well.. you have to, it's just the way it is with asynchronous calls. if you can elaborate your needs, there might be another solution though.

lordvlad Over a year ago

another option might be to let myTokensLeft be a globale variable (or rather let it be in the same scope as $('#grabbit').click and balanceRef.on. then you can drop the function checkBalance and.....too long, check my edit in a few secs.

webduvet · Accepted Answer · 2013-10-04 16:10:04Z

1

It seems to me that on your click event you only create another listener to "value" event and gods know how and when that event is triggered and where the function returns your mLeft.

What is happening in your code is that after each click on "#grabit" always new listener is created, but the function inside is not necessarily to be called and if it is called it is called asynchronously which means by the time it is finished you already got "undefined".

answered Oct 4, 2013 at 16:10

webduvet

4,2922 gold badges30 silver badges39 bronze badges

Collectives™ on Stack Overflow

Proper javascript functions structure

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related