javascript - 正确的javascript函数结构

Question

我正在从我的 Firebase 获取数据

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

这是获取数据的函数

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

当用户点击一个按钮时，我首先检查他们的余额

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

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

 });

这里的问题是它将函数值返回为 NaN 或未定义

我反复测试过，该函数确实有返回值。为什么它不能获取点击值？我在结构上做错了什么吗？我是 javascript 的新手

Answer 1

balanceRef.on 对我来说看起来像一个异步函数，这就是为什么您不会获得返回值的原因。尝试这样的事情:

//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

  });   

});

编辑:更多细节

函数 balanceRef.on 不会返回您想要的数据，它只会将函数 function(snapshot)... 附加到对象 balanceRef 的 value 事件。当对象 balanceRef 的 value 事件被触发时(即数据可用)，您的函数 function(snapshot)... 被执行，但它的返回值无处可去，因为 javascript 解析器已经继续前进。

试试这个:

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

编辑 2:为避免回调链，可以使用两个函数通用的变量。 (虽然这不是一个很好的做法，因为您无法确定该值是否已在您需要时设置!)

(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

  });

}());