while(true) 循环如何影响函数？

Question

我正在尝试为一项任务构建一个库存管理系统，但我很难理解这个 While(true) 循环如何没有“阻塞”函数中的其余代码。

出于分配的目的，所有内容都应该显示在控制台中。

问题出在 main();功能。当我运行代码时，提示按预期显示，但是在输入输入时，控制台中不会显示任何内容，直到我在提示中输入“退出”，也就是应该中断循环的时候。

感谢您的帮助。

下面是到目前为止的赋值代码，

function displayMenu() {
        window.console.log("The Inventory Management App");
        window.console.log("");
        window.console.log("COMMAND MENU");
        window.console.log("view - View all products");
        window.console.log("update - Update Products");
        window.console.log("del - Delete employee");
        window.console.log("exit - Exit the application");
}

function view(chingaderas){ 
    "use strict";
    var i = 1;
    chingaderas.forEach(function (thing) {
        window.console.log(String(i) + ". " + thing);
        i += 1;
    });
    window.console.log("");
}
            
function update(chingaderas) { // need to find out how to update a specific part of 2 dimensional array 
    "use strict";
var sku = window.prompt("Enter the SKU# of the item you would like to update");
var changeMade = false;
for (var i = 0; i < chingaderas.length; i++) { 
    if (sku == chingaderas[i][0]) {
            var currentStock = window.prompt("How many " + chingaderas[i][1] + " are in stock?");
            changeMade = true;
            if (isNaN(currentStock)) {
                    window.alert("Invalid entry");
                    update(chingaderas);
            } else {
                    chingaderas[i][2] = parseInt(currentStock);
                    window.console.log("The new inventory of " + chingaderas[i][1] + "is now " + chingaderas[i][2]);
            }
    } else if (sku == null) {
            break
    }
}
if (changeMade == false & sku != null) {
        window.alert("Sku number not found")
        update(chingaderas);
}
}
var inventory = [
    [2233, "Hat",    12, "$14.99"],
    [3223, "Socks",  36, "$9.99"],
    [4824, "Shirt",  10, "$15.99"],
    [6343, "Jeans",  22, "$39.99"],
    [9382, "Jacket", 5,  "$49.99"],
];

var main = function () {
   window.console.log("say something")
    
    let command; 
    displayMenu();
    while (true) {
            command = window.prompt("What would you like to do? (view, update, exit)");
            if (command == "view") { // if to view inventory
                    view(inventory); 
            } else if (command == "update") { // to run the update function 
                    update(inventory); 
            } else if (command == "exit"){ // to exit the program 
                   break; 
            } 
            else {
                    window.document.write("invalid entry"); 
            }
    
            
    }
    window.console.log("Program has ended"); 
}
main(); 

Answer 1

您需要给浏览器时间来显示新信息。 prompt 和 while(true) block - 在 prompt 完成并且循环完全完成之前，它们不允许当前选项卡执行任何操作。

您可能让main 在setTimeout 之后递归调用自身，以便有机会渲染：

var main = function() {
  window.console.log("say something")
  let command;
  displayMenu();
  command = window.prompt("What would you like to do? (view, update, exit)");
  if (command == "view") { // if to view inventory
    view(inventory);
  } else if (command == "update") { // to run the update function 
    update(inventory);
  } else if (command == "exit") { // to exit the program 
    window.console.log("Program has ended");
    return;
  } else {
    window.document.write("invalid entry");
  }
  setTimeout(main);
}

function displayMenu() {
  window.console.log("The Inventory Management App");
  window.console.log("");
  window.console.log("COMMAND MENU");
  window.console.log("view - View all products");
  window.console.log("update - Update Products");
  window.console.log("del - Delete employee");
  window.console.log("exit - Exit the application");
}


function view(chingaderas) {
  "use strict";
  var i = 1;
  chingaderas.forEach(function(thing) {
    window.console.log(String(i) + ". " + thing);
    i += 1;
  });
  window.console.log("");
}


function update(chingaderas) { // need to find out how to update a specific part of 2 dimensional array 
  "use strict";
  var sku = window.prompt("Enter the SKU# of the item you would like to update");
  var changeMade = false;
  for (var i = 0; i < chingaderas.length; i++) {
    if (sku == chingaderas[i][0]) {
      var currentStock = window.prompt("How many " + chingaderas[i][1] + " are in stock?");
      changeMade = true;
      if (isNaN(currentStock)) {
        window.alert("Invalid entry");
        update(chingaderas);
      } else {
        chingaderas[i][2] = parseInt(currentStock);
        window.console.log("The new inventory of " + chingaderas[i][1] + "is now " + chingaderas[i][2]);
      }
    } else if (sku == null) {
      break
    }
  }
  if (changeMade == false & sku != null) {
    window.alert("Sku number not found")
    update(chingaderas);
  }
}

var inventory = [
  [2233, "Hat", 12, "$14.99"],
  [3223, "Socks", 36, "$9.99"],
  [4824, "Shirt", 10, "$15.99"],
  [6343, "Jeans", 22, "$39.99"],
  [9382, "Jacket", 5, "$49.99"],
];


var main = function() {
  window.console.log("say something")
  let command;
  displayMenu();
  command = window.prompt("What would you like to do? (view, update, exit)");
  if (command == "view") { // if to view inventory
    view(inventory);
  } else if (command == "update") { // to run the update function 
    update(inventory);
  } else if (command == "exit") { // to exit the program 
    window.console.log("Program has ended");
    return;
  } else {
    window.document.write("invalid entry");
  }
  setTimeout(main);
}

main();

如果可能，最好完全避免使用prompt，因为它对用户非常不友好，并且会阻止渲染和与页面的交互 - 请考虑在页面上创建一个输入框和一个按钮。