如何在电子浏览器窗口中设置间隔（）？答案

【问题标题】：How to setInterval() in Electron BrowserWindow?如何在电子浏览器窗口中设置间隔（）？
【发布时间】：2020-02-03 09:57:52
【问题描述】：

我有一个简单的 Electron 应用程序，它查询 SQL 数据库并通过 HTML 表显示输出。我的一切工作正常，但现在我需要每 X 分钟“刷新”一次 HTML 表（使用 SQL 查询的新结果）。

现在，我直接在 HTML 中使用元标记使其正常工作：http-equiv="refresh" content="300"。这会每 5 分钟正确刷新一次页面，这正是我想要的。

虽然，问题是在 SQL 查询执行并构建 HTML 时，刷新会导致屏幕变白。显然，更好的解决方案是使用 DOM 并仅修改自上次刷新以来实际更改的单元格。我遇到的问题是让“setInterval”正常工作......再一次，这是一个非常简单的电子应用程序。我正在使用他们的起始样板。我尝试在<body> 标签中添加“setInterval”，使用如下代码：

<body onload='setInterval(updateTable(), 300000);'>

但代码只触发一次...我还尝试在正文末尾添加以下代码（就在</body> 标签内）：

<script>
    window.onload=function(e){
        setInterval(updateTable(), 300000);
    }
</script>

...从 window.onload 处理程序中删除它...：

<script>
    setInterval(updateTable(), 300000);
</script>

...也可以将其移至“renderer.js”文件：

setInterval(updateTable(), 300000);

在所有情况下，它只会触发一次...我知道这一点，因为 updateTable() 中的第一行代码通过 console.log() 将当前日期和时间输出到控制台..

我已经尝试将超时值降低到 10 秒（从 300000 到 10000），这样我就不必在测试时等待这么长时间，这没有任何区别。我怀疑我遇到的问题与我缺乏对电子框架的知识有关（比如，可能是不同的“过程”），我已经寻找解决方案两天了，但没有运气。非常感谢任何关于我如何做到这一点的建议！

【问题讨论】：

嗨 Shayne，您是否尝试过将 setInterval 移到 window.onload 函数之外？它不应该有所作为，但谁知道:)。除此之外，您能否包括如何检查它是否只触发一次？例如。在updateTable 函数中带有console.log。
感谢您的快速回复。是的，我有。查看我对主页所做的编辑...
您的页面中还有<meta http-equiv="refresh" content="300" 吗？如果是这样，删除它可能是值得的。您还可以包含整个renderer.js 文件吗？或者如果太大只是相关部分。
是的，我删除了刷新元标记（否则，它实际上会刷新）。除了默认的 cmets，“renderer.js”文件是空的。正如我所提到的，这是一个非常简单的应用程序。
您是否尝试过将整个updateTable 函数移动到setInterval 中？例如。 setInterval(function () { Update table code goes here }, 10000);.

标签： electron

【解决方案1】：

TL;DR

您的问题与 Electron 无关，更多与您传递给 setInterval 的内容有关。您没有传递函数updateTable，而是函数调用updateTable() 的结果。去掉函数名后面的括号。

分析

setInterval 和 setTimeout 两个函数都期望函数作为它们的第一个参数，它们将在特定时间或定期调用。但是，您传递给setInterval 的不是函数。你写：

setInterval(updateTable(), 10000)

当这一行被执行时，updateTable 被调用并且它的返回值被传递给setInterval。（如果函数没有显式返回任何内容，则返回 undefined。）这就是为什么您的函数只被调用一次（在设置计时器时）。

如果你写

setInterval(updateTable, 10000) // no parentheses

您实际上是将函数传递给setInterval，然后它会重复运行它。

您可能想知道为什么使用setTimeout 的解决方法有效。这是因为您实际上向它传递了一个函数。您正在指定内联函数，但当时不要调用它。在该函数中，调用updateTable 并不重要。重要的是传递给计时器函数的内容。

【讨论】：

哇...“为树而生”，有人吗？谢谢snwflk！我忽略该语法的另一个原因是因为我实际上将两个参数传递给“updateTable”。我切换回 setInterval，使用：setInterval('updateTable("tableOutput")', 10000)，但应该注意，函数（带参数）也可以使用匿名函数或箭头函数传递。（当然，取决于您的版本。）
实际上....为了避免“评估”，我最终切换到箭头函数：setInterval( () => { updateTable("tableOutput"); },1000);

【解决方案2】：

我找到了一个修复/解决方法...... setInterval 存在“错误”，或者（很可能）我只是因为我对碎片的“新奇”而遗漏了一些东西。但是，我没有使用 setInterval，而是切换到 setTimeout，然后在回调中，在调用 updateTable() 之后，我只是设置了另一个 setTimeout。无论出于何种原因，这都能完美运行......基本上，在“renderer.js”中，我替换了：

setInterval(updateTable(), 10000);

与

let timer = setTimeout(function refreshTimer() {
    updateTable();
    timer = setTimeout(refreshTimer, 10000);
  }, 10000);

尽管它们在功能上是等效的，但由于某种原因，它现在可以完美运行。

【讨论】：