NodeJS 告诉 open(html) 先走/告诉其他代码最后走答案

【问题标题】：NodeJS tell open(html) to go first/tell other code to go lastNodeJS 告诉 open(html) 先走/告诉其他代码最后走
【发布时间】：2021-12-03 17:40:47
【问题描述】：

我正在尝试确定 nodeJS 是否是我实习期间工作项目的可行解决方案。 TLDR：我需要让我的 basicNode.js 文件等到 open('./basic.html') 实际上完全打开浏览器并加载内容之前，它才会调用任何其他代码，无论是来自 basicNode.js 本身还是来自更改.js。

basicNode.js 的最终目标/目的应该是打开 html，一旦加载，从 change.js 调用 changeThis() 函数来更改 html 以显示“Hello”而不是“Welcome to JavaScript”。在调用更改函数之前，我尝试混合事物的顺序或让一些 console.logs 输出当前时间等，但我似乎无法在任何尝试之前完全完成 open('./basic.html')用于更改 html 元素

basic.html

<!DOCTYPE html>
<html>  
<head>  
</head>  
<body>
<p>Date/Time: <span id="datetime"></span></p>
  
<p id="here">Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="changeThis()"/>  
</form>  
</body> 
<script>
var dt = new Date();
    document.getElementById("datetime").innerHTML = dt.toLocaleString();
</script>
<script type="text/javascript" src="change.js"></script> 
<!--
<script>waitForElementToDisplay("#here",function(){alert("Hi");},1000,9000);</script> 
--> 
</html>

change.js

function changeThis() {
    document.getElementById("here").innerHTML = "Hello";
}

function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {
  var startTimeInMs = Date.now();
  (function loopSearch() {
    if (document.querySelector(selector) != null) {
      callback();
      return;
    }
    else {
      setTimeout(function () {
        if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
          return;
        loopSearch();
      }, checkFrequencyInMs);
    }
  })();
}

function sendAlert() {
    alert("Hi");
}

module.exports={sendAlert};
module.exports={changeThis};
module.exports={waitForElementToDisplay};

basicNode.js

const open = require('open');
var { change }  = require('./change')
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
global.document = new JSDOM('./basic.html').window.document;

open('./basic.html');

change.waitForElementToDisplay("#here",change.sendAlert(),1000,9000);
change.changeThis();

【问题讨论】：

如果你问为什么 open 不是“先行”，open('./basic.html') 是先行，这只是一个异步操作并返回 @987654321 @。对于刚接触 JS 和 Node 的人来说，这是一个高级主题，但是如果您想在确定打开文件后运行更改脚本，则需要等待承诺。您可以在上面的 MDN 链接中阅读所有相关信息。
布伦丹，你应该把它作为答案发布，这样你就可以获得信用！
@BrendanBond 当我将 open() 嵌套在 console.log() 中时，我确实注意到了这个概念，它输出 Promise {}，理论上可能的解决方案是实施检查因为当承诺已经实现时，我可以在什么时候调用更改函数？
另外，您可以使用 Promise.then 代替 await，例如。 open('./basic.html').then(() => { change.waitForElementToDisplay("#here",change.sendAlert(),1000,9000); change.changeThis(); }) 返回一个新的 Promise。

标签： javascript html node.js

【解决方案1】：

如果你问为什么 open 似乎不是“先行”， open('./basic.html') 会先行，这只是一个异步操作并返回 Promise。对于刚接触 JS 和 Node 的人来说，这是一个高级主题，但是如果您想在确定打开文件后运行更改脚本，则需要等待承诺。您可以在上面的 MDN 链接中阅读所有相关内容，网上有大量关于此主题的材料。

const open = require('open');
var { change }  = require('./change')
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
global.document = new JSDOM('./basic.html').window.document;

const main = async () => {
  await open('./basic.html');
  change.waitForElementToDisplay("#here",change.sendAlert(),1000,9000);
  change.changeThis();
}

main();

请注意，我已将代码包装在异步函数中，因为目前您不能在全局范围内使用 async/await 语法。或者，您可以按照@JSmart523 的指示进行操作：

const open = require('open');
var { change }  = require('./change')
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
global.document = new JSDOM('./basic.html').window.document;


open('./basic.html').then(() => {
  change.waitForElementToDisplay("#here",change.sendAlert(),1000,9000);
  change.changeThis();
});

【讨论】：

谢谢@BrendanBond，我认为这让我更近了一步；该代码是否偶然为您工作？将“Welcome to JavaScript”更改为“Hello”？这可能是一个单独的问题，但就该代码而言，我得到一个 TypeError: Cannot read properties of undefined (reading 'waitForElementToDisplay')，如果我注释掉 waitFor 函数，'changeThis' 也一样
不，我没有运行这段代码。这绝对是一个单独的问题，请检查您是否正确地从 change.js 导出函数（您不是），并且您是否在 basicNode.js 中正确导入了模块（对我来说也看起来不正确）。希望这会有所帮助！
好的，非常感谢！肯定有助于知道在哪里看，我会在下周二回来让它工作，关于在哪里看的任何提示或我应该如何正确导出/导入函数的示例？
This series of tutorials 是一个非常好的起点，应该为您提供解决更复杂问题所需的基础知识。玩得开心，祝你好运！