javascript - Electron 应用程序在运行 Javascript 代码时停止渲染

Question

我目前正在开发一个 Electron 应用程序，它本质上是我控制的媒体服务器的 DDNS 启动器。基本上，它检查互联网连接，获取服务器的当前 IP，然后在系统的默认浏览器中打开它。然而，我写的启动画面完全被破坏了。

每当我在系统上启动应用程序(从终端使用 npm)时，它都会加载框架，但图像在大约 1/3 点处卡住加载。在主 HTML 页面底部的脚本执行完毕之前，它不会加载图像的其余部分。

我有什么遗漏的吗？如果需要，我可以提供代码摘录。

编辑:

源代码摘录:

<script>
  function wait(ms) {
    var start = new Date().getTime();
    var end = start;
    while (end < start + ms) {
      end = new Date().getTime();
    }
  }

const isOnline = require('is-online');
const isReachable = require('is-reachable');
const {
  shell
} = require('electron');

window.onload = function() {
  // Main Script
  console.log('before');
  wait(3000);
  document.getElementById('progresstext').innerHTML = "Testing connection...";
  bar.animate(0.15); // Number from 0.0 to 1.0
  wait(250);
  var amIOnline = false;

  if (isOnline()) {
    amIOnline = true;
  }
  console.log("Internet Test Ran");

  if (!amIOnline) {
    document.getElementById('errortext').innerHTML = "ERROR: No internet connection. Check the internet connection.";
    document.getElementById('progresstext').innerHTML = "ERROR";
  }

  var isEmbyReachable = false;
  if (isReachable('******')) {
    isEmbyReachable = true;
    document.getElementById('progresstext').innerHTML = "Connection Test: Passed";
    //=> true
  }

  //Open Emby in the default browser
  if (amIOnline && isEmbyReachable) {
    shell.openExternal("*****");
  }
};

</script>

Pastebin 完整来源链接:https://pastebin.com/u1iZeSSK

谢谢

开发系统规范:macOS Mojave 10.14，最新稳定的 Electron 版本

Answer 1

问题出在您的 wait 函数中，因为 Node js 是单线程的，所以您的等待函数正在阻塞您的进程。您可以尝试以下代码。但我真的建议您看看如何在 JavaScript 中编写异步函数，并从 setInterval 和 setTimeout 开始。

但是暂时您可以尝试此代码。

window.onload = function () {
    // Main Script
    console.log('before');

    // wait 3 seconds
    setTimeout(function () {
        document.getElementById('progresstext').innerHTML = "Testing connection...";
        bar.animate(0.15); // Number from 0.0 to 1.0

        // wait 250 mills
        setTimeout(function () {
            var amIOnline = false;

            if (isOnline()) {
                amIOnline = true;
            }
            console.log("Internet Test Ran");

            if (!amIOnline) {
                document.getElementById('errortext').innerHTML = "ERROR: No internet connection. Check the internet connection.";
                document.getElementById('progresstext').innerHTML = "ERROR";
            }

            var isEmbyReachable = false;
            if (isReachable('******')) {
                isEmbyReachable = true;
                document.getElementById('progresstext').innerHTML = "Connection Test: Passed";
                //=> true
            }

            //Open Emby in the default browser
            if (amIOnline && isEmbyReachable) {
                shell.openExternal("*****");
            }
        }, 250)
    }, 3000)


};

您不能在 JavaScript 中等待 while 或任何其他阻塞循环，因为它会阻塞所有其他执行，包括页面渲染。