JavaScript addEventListener & 初始化函数冲突，试图更新全局变量

Question

我正在开发一个游戏交互菜单，它是一个 HTML 菜单，它会根据玩家当前的工作来显示操作。

我的问题：我通过 window.addEventListener 检索有关球员工作的信息。它正在从我的游戏 Lua 文件发送到 JavaScript。我可以确认这是有效的。但是，在 JavaScript 部分存在问题。

作业正在 item.updateJob 下的 addEventListener 中存储/检索/更新，作为名为 playerJob 的变量。这也将更新具有相同名称的全局变量。正如您在代码中看到的，init() 函数在 window.addEventListener 之前运行。 init() 必须使用更新的全局变量 playerJob 来显示正确的菜单，但事实并非如此。在控制台中调试它时，它告诉我它是“未定义的”。我试图将 window.addEventListener 放在 §( function ... 代码中的 init() 函数上方，但这没有做任何事情。

如何确保 window.addEventListener 正在运行并在 init() 函数执行任何操作之前设置 playerJob 变量？我尝试在顶部放置一个全局变量并这样做：playerJob =“police”，然后它工作正常。有谁知道我该怎么做？

    var playerJob;

    $( function() {
        // Adds all of the correct button actions 
            console.log("Before int: ", playerJob)
            init();

        // Gets the interactionmenu div container 
        var interactionContainer = $( "#interactionmenu" );

        // Listens for NUI messages from Lua 
        window.addEventListener( 'message', function( event ) {
            var item = event.data;


            // Show the menu 
            if ( item.showmenu ) {
                ResetMenu()
                interactionContainer.show();
            }

            if ( item.hidemenu ) {
                interactionContainer.hide(); 
            }

            // This will update the players job, and does work!
            if ( item.updateJob ) {
                playerJob = item.job; 
                setJob(playerJob);
                console.log("playerJob set to: ", playerJob)
            }                   
        } );
    } )

    // Hides all div elements that contain a data-parent, in
    // other words, hide all buttons in submenus. 
    function ResetMenu() {
        $( "div" ).each( function( i, obj ) {
            var element = $( this );

            if ( element.attr( "data-parent" ) ) {
                element.hide();
            } else {
                element.show();
            }
        } );
    }

    // Configures every button click to use its data-action, or data-sub
    // to open a submenu. 
    function init() {
        // Loops through every button that has the class of "menuoption"
        $( ".menuoption" ).each( function( i, obj ) {

            // If the button has a data-action, then we set it up so when it is 
            // pressed, we send the data to the lua side. 
            if ( $( this ).attr( "data-action" ) ) {
                $( this ).click( function() { 
                    var data = $( this ).data( "action" ); 

                    sendData( "ButtonClick", data ); 
                } )
            }

            // If the button has a data-sub, then we set it up so when it is 
            // pressed, we show the submenu buttons, and hide all of the others.
            if ( $( this ).attr( "data-sub" ) ) {
                $( this ).click( function() {
                    var menu = $( this ).data( "sub" );
                    var element = $( "#" + menu ); 
                    element.show();
                    $( this ).parent().hide();  
                } )
            }

            // Here I'd like to know the playerJob, and want via item.updateJob in the addEventListener
            // However it returns undefined, no matter if I place the init() above or below
            // My question is: how can I make sure the item.updatePlayer job in the addEventListener updates
            // the variable globally and makes sure that it does that before this function is being run? 
            console.log("right before data-require: ", playerJob)   // returns undefined X amount of times.         

            if ( ( $( this ).attr ( "data-require" ) == "police" && playerJob != "police") ) {
                $( this ).hide();
            }

            else if ( ( $( this ).attr ( "data-require" ) == "mecano" && playerJob != "mecano") ) {
                $( this ).hide();
            }

            else if ( ( $( this ).attr ( "data-require" ) == "ambulance" && playerJob != "ambulance") ) {
                $( this ).hide();
            }
        } );

    }

    // Send data to lua for processing.
    function sendData( name, data ) {
        $.post( "http://wk_interactionmenu/" + name, JSON.stringify( data ), function( datab ) {
            if ( datab != "ok" ) {
                console.log( datab );
            }            
        } );
    }

Answer 1

如果我正确理解了这个问题，您希望 init 仅在收到 message 事件后运行，因此已设置 playerJob。

我认为您不理解的是 addEventListener 调用没有运行侦听器，它只是在设置它。问题是message 事件要到稍后才会发生。这就是为什么当您查看playerJob 时会得到undefined。

但您不希望init 运行多次，因此不希望它从事件处理程序中运行。

您可以在同一位置设置标志var didInit = false;，而不是当前调用init()。然后，在您的事件处理程序中，设置playerJob 后，检查didInit 的状态。如果还不是真的，请将其设置为 true 并运行您的 init 函数。

这是你的 onLoad ($(function(){...) 函数的替代品，它应该可以完成这项工作：

$( function() {
    // Did we initialize yet?
    var didInit = false;

    // Gets the interactionmenu div container
    var interactionContainer = $( "#interactionmenu" );

    // Listens for NUI messages from Lua 
    window.addEventListener( 'message', function( event ) {
        var item = event.data;


        // Show the menu
        if ( item.showmenu ) {
            ResetMenu()
            interactionContainer.show();
        }

        if ( item.hidemenu ) {
            interactionContainer.hide();
        }

        // This will update the players job, and does work!
        if ( item.updateJob ) {
            playerJob = item.job;
            setJob(playerJob);
            console.log("playerJob set to: ", playerJob)

            // Initialize if we didn't yet
            if (!didInit) {
                didInit = true;
                init();
            }
        }
    } );
} )

玩家的工作会改变吗？如果是这样，您可能想要再次运行隐藏按钮的初始化代码部分，并且您想要更改它以显示以前隐藏的任何现在相关的按钮。

如果是这种情况，可能值得将 init 分成两部分 - 一个可以在开始时运行（就像您的原始代码一样），它不依赖于 playerJob，另一个不依赖于 playerJob可以在任何时候运行playerJob 更改（包括第一次设置）并更新 UI。然后，您可以将其作为事件处理程序的一部分运行（不带任何条件或 didInit 标志）。