时间戳

首页 > 解决方案 > Angular：如何在 2 个不同的选项卡中同时调用一个函数

angular - Angular：如何在 2 个不同的选项卡中同时调用一个函数

问题描述

我需要在我正在创建的 Web 应用程序中执行特定测试。为此，我必须在浏览器中打开 2 个不同的选项卡并在 2 个选项卡中运行应用程序。

然后我想在 2 个选项卡中同时运行相同的函数（示例中为 console.log("toto")），以便在控制台中观察结果。

为此，我创建了一个包含当前日期的变量和一个包含到期日的变量，然后在这两个变量之间进行减法。当结果等于 0 时，函数会在 2 个选项卡中触发。目标是在 2 个打开的选项卡中启动相同的功能，例如在 17:00

我尝试使用以下不好的代码来做到这一点：

let currentTime = Date.now();
let timeToLaunch = Date.parse("Wed, 04 August 2021 17:00");
let go = currentTime - timeToLaunch;

let goObservable = of(go);
goObservable.subscribe((value) => {
  console.log(value);
  if (value === 0) console.log("toto");
});

我正在考虑使用 setTimeout()，但问题是我在选项卡 1 和选项卡 2 中启动应用程序的时间之间会有一个方法运行滞后。所以不知道该怎么做（如何 laucnh在 2 个选项卡中同时发挥作用）

谢谢你的帮助

标签： angularfunction

解决方案

使用setInterval并定期检查到期日是最简单的选择。如果您将检查间隔设置得太低并且不关心性能，那么它可能是一个选项。

但是，是的，会有一些滞后。

其他选项是使用-Broadcast Channel。如果它是相同的来源（我想是），这将使您能够进行 intertab 通信。

您可以通过以下方式实现它：

var channel = new BroadcastChannel('my_channel');

channel.postMessage('Test message.'); // send
channel.onmessage = function (ev) { console.log(ev); } // receive

通过使用它，您可以拥有“主”选项卡，用于检查是否符合截止日期。并且当它向其他选项卡广播消息以启动它们的功能时。

推荐阅读