javascript变量的怪异行为

Question

我有一个页面，两个用户在上面互相玩，我在我的 javascript 代码顶部设置了一些全局变量：

    myScore             = 0;
    OpponentScore       = 0;

    winner = loser = loser_point = winner_point = dual = null;

并在服务器广播用户答案时检查另一部分代码中的用户答案：

我正在使用 laravel echo 和 pusher

            .listen('UserAnswered', (e) =>  {

                $(document).find('.myAvatar').find('i.fa').removeClass('animated');
                $(document).find('.myAvatar').find('i.fa').removeClass('heartBeat');
                $(document).find('.myAvatar').find('i.fa').removeClass('swing');

                $(document).find('.opponentAvatar').find('i.fa').removeClass('animated');
                $(document).find('.opponentAvatar').find('i.fa').removeClass('heartBeat');
                $(document).find('.opponentAvatar').find('i.fa').removeClass('swing');

                if( e.user_id === parseInt("{{ Auth::id() }}", 10) )
                {
                    //this user answered
                    if( e.result == 1 )
                    {
                        myScore++;
                        $('.myResult').find('.target').text(myScore);
                        $('.myAvatar').find('i.fa').addClass('heartBeat animated');
                    }
                    else
                    {
                        $('.myAvatar').find('i.fa').addClass('swing animated');
                    }
                }
                else
                {
                    //opponent answered
                    if( e.result == 1 )
                    {
                        OpponentScore++;
                        $('.opponentResult').find('.target').text(OpponentScore);
                        $('.opponentAvatar').find('i.fa').addClass('heartBeat animated');
                    }
                    else
                    {
                        $('.opponentAvatar').find('i.fa').addClass('swing animated');
                    }

                }

            });

我有一个名为setScoreboard 的方法，它在游戏结束时设置winner、loser、winner_point 和loser_point。

设置记分板功能：

        /**
         * Set Scoreboard Function
         */
        function setScoreboard() {

            window.Echo.disconnect();

            if( myScore > OpponentScore )
            {

                winner       = "{{ json_encode(Auth::id()) }}";
                loser        = OpponentId;
                winner_point = myScore;
                loser_point  = OpponentScore;
                dual         = false;
                $(document).find('input[name="game_id"]').val(String(gameId));


                $(document).find('input[name="winner"]').val(winner);
                $(document).find('input[name="loser"]').val(loser);
                $(document).find('input[name="winner_point"]').val(String(myScore));
                $(document).find('input[name="loser_point"]').val(String(OpponentScore));
                $(document).find('input[name="dual"]').val('false');

                //submit hidden form
                $(document).find('form[name="setResultForm"]').submit();
            }
            else if (OpponentScore > myScore)
            {
                winner          = OpponentId;
                loser           = "{{ json_encode(Auth::id()) }}";
                winner_point    = OpponentScore;
                loser_point     = myScore;
                dual            = false;
                $(document).find('input[name="game_id"]').val(String(gameId));

                $(document).find('input[name="winner"]').val(winner);

                $(document).find('input[name="loser"]').val(loser);
                $(document).find('input[name="winner_point"]').val(String(OpponentScore));
                $(document).find('input[name="loser_point"]').val(String(myScore));
                $(document).find('input[name="dual"]').val('false');

                //submit hidden form
                $(document).find('form[name="setResultForm"]').submit();

            }
            else if (OpponentScore === myScore)
            {

                winner = "{{ json_encode(Auth::id()) }}";
                loser  = OpponentId;
                winner_point = loser_point = myScore;
                dual = true;
                $(document).find('input[name="game_id"]').val(String(gameId));
                {{--$(document).find('input[name="winner"]').val(String(parseInt("{{ json_encode(Auth::id()) }}", 10)));--}}
                $(document).find('input[name="winner"]').val(winner);
                // $(document).find('input[name="loser"]').val(String(OpponentId));
                $(document).find('input[name="loser"]').val(loser);
                $(document).find('input[name="winner_point"]').val(String(OpponentScore));
                $(document).find('input[name="loser_point"]').val(String(OpponentScore));
                $(document).find('input[name="dual"]').val('true');

                //submit hidden form
                $(document).find('form[name="setResultForm"]').submit();

            }

一切看起来都不错，代码运行良好，但在一侧随机，winner 或 loser 将 null！

玩家一：

玩家二：

由于两个用户端的代码相同，有谁知道这是为什么？

Answer 1

随机出现的问题可能会令人沮丧！

在这种情况下，问题似乎在于您在刀片页面上分配了 winner 或 loser 变量。根据哪些条件为真（OpponentScore vs myScore）您有“随机”的机会将特定变量发送到服务器。这几乎可以肯定是“随机”出现行为的原因 - 您有可能在每个 if-check 中发送不同的（潜在的）错误变量。

跟踪和解决此问题的方法是直接在每个 if-check 块分配部分下设置控制台日志，如下所示：

if( myScore > OpponentScore )
    {
       winner       = "{{ json_encode(Auth::id()) }}";
       loser        = OpponentId;
       console.log('myScore > OppScore block results:  winner = " + winner + "  loser = " + loser);
    }

为每个人都这样做。在这里，您可以确定是否未分配 JS var OpponentId 或未分配 Laravel Auth::user()->id。如果是 JS，则修复在刀片页面上。如果是 Laravel Auth，则修复可能在会话中，或者可能在指向此页面的路由上，其中没有用于身份验证的中间件（因此此游戏页面是免身份验证的）。

正如您所说，用户需要登录才能在此页面上，我怀疑这是分配 JS var OpponentId 的错误，它将显示在控制台中，并且可以固定在那个页面上。我看不到它是在哪里分配的，所以我不能肯定地说 - 但如果它在控制台中显示为未定义，你就会知道问题出在哪里。