Question

HTML / CSS代码与问题无关，大多数JavaScript代码也是如此

在line 51的JavaScript console.log(mode);中，我希望看到1或2，而是获得undefined。我唯一的猜测是在$pregame.on('click', 'button', function () { ...内的代码完成其工作之前记录了该值。

如何在上面的代码之后运行// ------------ game code ------------下的代码？我有什么选择？

jQuery代码

(function($) {
    var $pregame = $('div#pregame');
    var $notifier = $('div#notifier')
    var $game = $('div#game');
    var mode;


    for (var i = 0; i < 8; i++) {
        $game.append($('div.frame').eq(0).clone());
    }

    var $frame = $game.find('div.frame');

    $(window).on('resize', function() {
        var windowW = window.innerWidth, windowH = window.innerHeight;
        var gameLen = windowW < windowH * 0.9 ? windowW : windowH * .9;
        $game.css({
            'width':  gameLen + 'px',
            'height': gameLen + 'px'
        });
    }).trigger('resize');

    $pregame.on('click', 'button', function () {

        if ( $(this).data('mode') === 1 ) {
            mode = 1;
        } else {
            var $divs = $notifier.children('div');
            $divs.eq(0).text('Player 1').end().eq(3).text('Player 2');
            mode = 2;
        }

        $pregame.fadeOut(500, function () {
            $game.fadeIn(500);
            $notifier.css('display', 'table').animate({'opacity': 1}, 500);
        });

        $pregame.off('click');
    });

    // ------------ game code ------------

        var activeFrame = 4, gameArray = [];
        for (var i = 0; i < 9; i++) {
            gameArray.push(['-','-','-','-','-','-','-','-','-']);
        }
        console.log(mode); // <<----- THIS HERE <<---------
        if ( mode === 1 ) {
            $('body').on('click', 'div.frame', function() {
                var index = $frame.index(this);
                if ( index === activeFrame ) console.log('click on active Frame');
            });
        } else if ( mode === 2 ) {

        }

})(jQuery);

Answer 1

我想到的一个解决方案是使用回调函数。在这样的函数中包装游戏代码：

function callMeLater() {
    var activeFrame = 4, gameArray = [];
    for (var i = 0; i < 9; i++) {
        gameArray.push(['-','-','-','-','-','-','-','-','-']);
    }
    console.log(mode); // <<----- THIS HERE <<---------
    if ( mode === 1 ) {
        $('body').on('click', 'div.frame', function() {
            var index = $frame.index(this);
            if ( index === activeFrame ) console.log('click on active Frame');
        });
    } else if ( mode === 2 ) {

    }
}

并从.animate()

调用它

$notifier.css('display', 'table').animate({'opacity': 1}, 500, callMeLater);

但这对我来说似乎有点奇怪。我还有其他选择吗？

Answer 2

在单击预赛前按钮之前，您已经定义了mode，而在您在第51行评估模式时不会调用它。

一种解决方案是将});行42移至行60。这样，在您点击之前，游戏代码部分也不会运行。

在上面的代码之后执行JS代码的一部分

2 个答案: