javascript - javascript变量的怪异行为
问题描述
我有一个页面,两个用户在上面互相玩,我在我的 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
which set winner
, loser
, winner_point
and的方法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!
玩家一:
球员二:
由于两个用户端的代码相同,有谁知道这是为什么?
解决方案
随机出现的问题可能会令人沮丧!
在这种情况下,问题似乎在于您在刀片页面上分配了winner
or变量。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 varOpponentId
或未分配 Laravel Auth::user()->id
。如果是 JS,则修复在刀片页面上。如果是 Laravel Auth,则修复可能在会话中,或者可能在指向此页面的路由上,其中没有用于 auth 的中间件(因此此游戏页面是 auth 免费的)。
正如您所说,用户需要登录才能在此页面上,我怀疑这是 JS var, 的分配错误,OpponentId
它将显示在控制台中,并且可以在该页面上修复。我看不到它是在哪里分配的,所以我不能肯定地说——但如果它在控制台中显示为未定义,你就会知道问题出在哪里。
推荐阅读
- node.js - NodeJS - 错误:连接 ECONNREFUSED 127.0.0.1:port (chrome-remote-interface)
- python - 如何让我的精灵在 pygame 中不会横向移动?
- python - 用户想在 Python 中手动设置小数点
- elasticsearch - 封闭+热指数还是暖+热指数?
- django - 如何在 Django 管理中为多对多多选删除项目
- python - Scrapy spider 在几个小时后意外暂停继续
- javascript - 数据集到 Javascript/Typescript 中的对象数组
- html - 如何在使用 Flask 时让 CSS 找到我的静态图像?
- python - 如何将 django 视图更改为 django rest farmework
- android - 如何在android中保存onActivityResult Intent数据?