如何在gwt中实现浏览器选项卡可见性

Question

动机：我定期调用服务器向用户提供新鲜数据。但我的程序可以在多个选项卡中运行。我想通过检测哪个选项卡处于活动状态来减少服务器上的负载。如果我可以直接到达状态或将选项卡的可见性状态放入变量中，我的定期代码可以检查该变量并决定不调用服务器。

Javascript代码：我在here

找到了javascipt上的相关代码

document.addEventListener("visibilitychange", () => {
  var tabIsVisible = !document.hidden;
  console.log("tabIsVisible: " + tabIsVisible);   
});

在 GWT 中我可以将代码重写为 this

public static native void addEventListener_visibilityChange(){
    $doc.addEventListener("visibilitychange", () => {
      var tabIsVisible = !document.hidden;
      console.log("tabIsVisible: " + tabIsVisible);
    });
}

但是编译错误

Compiling module com.tugalsan.app.table.App
   Tracing compile failure path for type 'com.tugalsan.api.gui.client.browser.TGC_BrowserTabUtils'
      [ERROR] Errors in 'jar:file:/C:/Users/me/.m2/repository/com/tugalsan/com.tugalsan.api.gui/1.0-SNAPSHOT/com.tugalsan.api.gui-1.0-SNAPSHOT.jar!/com/tugalsan/api/gui/client/browser/TGC_BrowserTabUtils.java'
         [ERROR] Line 8: syntax error
>         $doc.addEventListener("visibilitychange", () => {

而且，我怎样才能到达 tabIsVisible 变量？

Answer 1

JSNI 不支持

=>

箭头语法。也就是说，JSNI 在过去 10 年左右的时间里不被鼓励，而是更喜欢 JsInterop。

像这样的 JavaScript 事件处理很容易转换为具有 Java 8+ 语法的 JsInterop。我还假设您的项目中有

elemental2-dom

，这是浏览器提供的一组对 DOM api 的绑定。通过

elemental2.dom.DomGlobal

的一次导入，我们现在可以编写

DomGlobal.document.addEventListener("visibilitychange", event -> {
  var tabIsVisible = !DomGlobal.document.hidden;
  DomGlobal.console.log("tabIsVisible: " + tabIsVisible);   
});

唯一的区别是：

• DomGlobal.

  和

  document

  的

  console

  前缀 - 从技术上讲，这些是可选的，因为您可以为这两个字段添加静态导入，但许多公司代码标准不鼓励这样做。

• =>

  JS 令牌需要更改为 Java 的

  ->

  。
• lambda 的

  event

  参数，但要显式声明，即使未使用它。