javascript 对象属性日志未定义

Question

好的，所以我在我的 js 文件的顶部声明了一个 js 对象，在底部我有一个函数，它正在创建一个属性并向它添加一个值，但是当我去控制台时，将新属性记录在不同的它返回未定义的函数，但如果我记录整个对象，它会显示该对象，其值如下的新属性是代码：

$(document).ready(function(){
var allVars={};
contentJson();
bioPageClass();


//start bioPage code.
function bioPageClass(){
    console.log(allVars.nums)
    //allVars.bioContent=allVars.allContent.theComittee.bios;
    allVars.timeTxt=allVars.allContent.theComittee.timeline;
    mouseEx();
    bioInfo(0);
    $('#next').click(function(){
                var itsindex = inkDot($('.dot').index($('.filled'))+1);

            });

            $('#pre').click(function(){
                var itsindex2 = inkDot($('.dot').index($('.filled'))-1);

            });

            function inkDot(dots){

                $('.dot').removeClass('filled');
                var equalize = dots < 0 ? 0 : dots;

                if(equalize <= $('.dot').length -1){
                $('.dot:eq('+equalize+')').addClass('filled');
                console.log('1st if '+equalize);
                bioInfo(equalize);
                }else{
                    equalize=0;
                    console.log('the else '+equalize);
                    $('.dot:eq('+equalize+')').addClass('filled');
                    bioInfo(equalize);
                }
            }

            function mouseEx(){
                $(".TLBtn").mouseover(function(){
                    if(!$(this).hasClass('clkd')){
                        $(this).addClass("timeROver");
                    }
                }).mouseout(function(){
                    if(!$(this).hasClass('clkd')){
                        $(this).removeClass("timeROver");       
                    }
                });

                $(".TLBtn").click(function(){
                    $(".TLBtn").removeClass('clkd timeROver');
                    $(this).addClass('clkd timeROver');
                })
            }

            function timeLineInfo(){

            }

            function bioInfo(ix){
                $('.bioCon').fadeOut(100, function(){
                    $('#bioImage > img').attr('src',bioContent[ix].image);
                    $('#bioName').html(allVars.bioContent[ix].name);
                    $('#bioTitle').html(allVars.bioContent[ix].title);
                    $('#bioDisc').html(allVars.bioContent[ix].details);
                    $('.bioCon').fadeIn();
                });
            }
        }
    //end bio page code.


            //call content json.
            function contentJson(){
                $.getJSON("content.json", function(json){
                allVars.allContent = json;
                allVars.nums = 8000;


                });
            }
});

我在这里做错了什么？？？

Answer 1

问题是这些函数是异步运行的，bioPageClass 在 getJSON 完成之前被调用。更改它，以便将 bioPageClass 作为回调调用。

如果你愿意，你可以这样做：

在顶部：

contentJson(bioPageClass);

在contentJson:

function contentJson(callback){
  $.getJSON("content.json", function(json){
    allVars.allContent = json;
    allVars.nums = 8000;
    callback();
  });
}

但是传递 allVars 而不是保持全局性可能更容易（也是更好的做法）。在contentJson 中定义它，然后将其传递给bioPageClass。如果没有更高级的回调，您可以这样做：

function contentJson(){
  var allVars = {};
  $.getJSON("content.json", function(json){
    allVars.allContent = json;
    allVars.nums = 8000;
    bioPageClass(allVars);
  });
}