正确的JavaScript函数结构

Proper javascript functions structure

本文关键字：函数 结构 JavaScript      更新时间：2023-09-26

我正在从我的火力基地获取数据

//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很陌生

对我来说

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

在我看来，在您的点击事件中，您只创建了另一个侦听器来"重视"事件，上帝知道如何以及何时触发该事件以及该函数返回您的 mLeft 的位置。

代码中发生的事情是，每次单击"#grabit"后，总是会创建新的侦听器，但内部的函数不一定要调用，如果调用它，则会异步调用，这意味着当它完成时，您已经得到了"未定义"。

相关文章：