javascript 在页面完全加载之前提示执行并阻止console.log

vbkedwbf 于 2023-10-14 发布在 Java

关注(0)|答案(1)|浏览(93)

我有个有趣的问题
我在JS中有一个提示。当我转到我的页面提示立即执行并阻止console.log。在提示符中执行一些逻辑操作后，当我关闭提示符时，所有console.logs立即显示在控制台中。只有当我第一次加入页面时才会发生这种情况。下一次所有的控制台.日志工作正常。我知道这个问题，但不知道解决的办法.我想这就是浏览器和js的工作方式。这里没有解决办法。

let userAnswer = "";
let contvertedStr = "";

while (true) {
  const type = prompt(
    "Program – Main Menu \nPlease enter 1, 2, 3, or exit."
  ).toLowerCase();

  if (type === "1") {
    while (!userAnswer) {
      userAnswer = prompt("Please enter a string.");

      if (!userAnswer) {
        console.log("You need to enter something");
      }
    }
  }

  if (type === "2") {
    if (!userAnswer) {
      console.log("You need to first enter a String");
      continue;
    }

    const splitString = userAnswer.split(" ");
    let newArray = [];

    for (const str of splitString) {
      if (str.length >= 5) {
        newArray.push(str + "-bonk");
      } else {
        newArray.push(str + "-bink");
      }
    }

    contvertedStr = newArray.join(" ");

    console.log("String converted");
  }

  if (type === "3") {
    if (contvertedStr) {
      console.log(contvertedStr);

      userAnswer = "";
      contvertedStr = "";

      continue;
    } else {
      console.log("You need to first convert your String");
      continue;
    }
  }

  if (type === "exit") {
    console.log("Thanks for using the ROBOT Language Converter!");
    break;
  }
}

我triend DOMContentloaded，window.onload，fixc，defer等。它没有工作

JavaScript

来源：https://stackoverflow.com/questions/77275991/prompt-executing-before-page-full-load-and-block-the-console-log

1条答案

按热度按时间

o7jaxewo1#

while (true) {
除非在async循环中使用，否则这对JavaScript来说从来都不是一个好主意，当主事件循环不断被阻塞时，控制台的行为可能是未定义的行为，不应该是你依赖的东西。
现在有两个简单的方法来解决这个问题，
1.使用setTimeout继续循环。
1.使用上面指出的async循环。
因此，对于选项1 ->

function doLoop() {
  const r = prompt('type x to quit').toLowerCase();
  console.log(`you typed ${r}`);
  if (r !== 'x') 
    setTimeout(doLoop);
}

doLoop();  //lets start the loop

因此，基本上在上面我们只是用setTimeout(doLoop)替换continue，并删除while (true) {
现在对于选项2，使用async循环，从长远来看，这是更好的选择，因为它更容易扩展。

const breath = () => new Promise(resolve => setTimeout(resolve));

async function doLoop() {
  while (true) {
    await breath();
    const r = prompt('type x to quit').toLowerCase();
    console.log(`you typed ${r}`);
    if (r === 'x') break;
  }
}

doLoop();  //lets start the loop

现在在上面你可以看到我们已经使用了while (true) {，但是这里的技巧是，当这样做的时候，你需要允许事件循环运行，这就是breath函数正在做的事情。prompt函数仍然会阻塞，但是那些breath函数只会给事件循环留出一些时间来完成它的任务。还要注意async和await的语法，这就是使看起来像sync的代码实际上是async的神奇之处，因此浏览器/ JS友好。
当然，更好的是不使用prompt摆在首位，大多数GUI库这些天都有做对话框的功能，不仅这些看起来更好，他们也不会阻止浏览器主事件循环像alert/prompt等做。

赞(0）回复(0）举报 2023-10-14

我来回答

javascript 在页面完全加载之前提示执行并阻止console.log

1条答案

相关问题

热门标签

最新问答