Question

好吧所以我在js文件的顶部声明了一个js对象，在底部我有一个创建属性并为其添加值的函数但是当我去控制台时将新属性改为另一个函数它返回undefined但如果我记录整个对象它显示对象，新属性及其下面的值是代码：

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

javascript对象属性日志未定义

1 个答案: