Question

我不完全确定这是可能的，但这就是我正在做的事情。

我有一个按钮列表，按下后，修改他们所附加的数据库，（例如，点击按钮1会为玩家1的分数增加10分）

我想要一起做的是调用生活在单独页面上的javascript函数，这是一种视觉确认点，这些点被添加到玩家1的帐户中。

为什么我要像这样组织它？

我正在运行一个Twitch频道，我正在构建一系列网页视图来显示统计信息和信息。我希望控制观众从一个页面看到的内容，并将结果显示在不同的页面上。

这是我到目前为止所拥有的：

HTML（管理页面）：

<button class="addPoints" data-id="player1" data-name="Player 1">Player 1</button>

JS（管理页面）：

$(".addPoints").on('click', function(){
var $id = $(this).data('id');
var $name = $(this).data('name');
//AJAX MAGIC TO INSERT POINTS INTO DATABASE SO I CAN KEEP SCORE//
tallyPopup($id, $name);
});

HTML（显示页面）：

<div class="displayScreen"></div>

JS（显示页面）：

function tallyPopup(member, name){
$('.displayScreen').append(<div class='tallyPopup' id='"+member+"'><div class='portrait' id='"+member+"'></div><span class='name'>"+name+"</span><span class='score'>+10</span></div>);
$('.tallyPopup').animate({
opacity: 1
}, 3000, function(){
$(this).remove();
});
}

我知道我所拥有的并没有连接这两页，因为我没有第一个如何做到这一点的线索，如果它甚至可能的话。或者，有没有办法让显示HTML检查数据库是否已更新，然后运行tallyPopup函数？

提前致谢。

Answer 1

您无法在运行您网站的其他客户（包括您自己的客户）上调用该功能。

要继续检查显示页面上的点，请使用var intv = setInterval(function () {}, nMilliseconds)重复运行一个功能，直到您调用clearInterval(intv)，这可能不会执行，因为您可能希望它永远运行，但可能只是每分钟一次（nMilliseconds = 60000）。

setInterval(function () { $.get('/point-count').then(tallyPopup) }, 60000)

tallyPopup将从AJAX响应中接收数据参数。

当然，在管理员方面，你必须填写该行，通过PUT，POST或PATCH通过AJAX更新点数。我会考虑使用PATCH作为语义问题。

另外考虑存储$(this)（var $this = $(this)）的返回值，而不是多次调用它，使用promises，使用CSS动画而不是$.animate（这些表现要好得多）。考虑使元素不透明然后可见（可能在不可见时屏幕外），而不是使用$.remove（也是性能改进）。

从单独的页面

1 个答案: