从单独的页面执行功能

Question

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

我有一个按钮列表，当按下这些按钮时，会修改它们所连接的数据库（例如，单击按钮 1 将为玩家 1 的得分增加 10 分）

我希望同时执行的操作是调用位于单独页面上的 javascript 函数，这是一种视觉确认点已添加到玩家 1 的帐户。

我为什么要这样组织？

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

这是我目前所拥有的：

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();
});
}

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

提前致谢。

Answer 1

您不能在运行您网站的其他客户端（包括您自己的客户端）上调用函数。

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

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

tallyPopup 将接收来自 AJAX 响应的数据参数。

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

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