如何在第一次运行脚本时在Javascript中打印一组名称，然后在第二次出现提示？

This is the exercise:

这是练习:

Create a small program that contains a list of employee names. Print out the list of names when the program runs the first time. Prompt for an employee name and remove that specific name from the list of names. Display the remaining employees, each on its own line.

创建一个包含员工姓名列表的小程序。程序第一次运行时打印出名称列表。提示员工姓名并从名称列表中删除该特定名称。显示剩余的员工,每个员工都在自己的行上。

Example Output

There are 5 employees:

有5名员工:

John Smith
Jackie Jackson
Chris Jones
Amanda Cullen
Jeremy Goodwin

约翰史密斯杰基杰克逊克里斯琼斯阿曼达卡伦杰里米古德温

Enter an employee name to remove: Chris Jones

输入要删除的员工姓名:Chris Jones

There are 4 employees:

有4名员工:

John Smith
Jackie Jackson
Amanda Cullen
Jeremy Goodwin

John Smith Jackie Jackson Amanda Cullen Jeremy Goodwin

Constraint

• Use an array or list to store the names.

•使用数组或列表存储名称。

This is what I've tried so far (although it prompts for the name to be removed as soon as the script loads, rather than after the first 5 names have been printed).

这是我到目前为止所尝试的(尽管它会在脚本加载时提示删除名称,而不是在打印前5个名称后删除)。

var nameToRemove;
var employee = ["John Smith", "Jackie Jackson", "Chris Jones", "Amanda Cullen", "Jeremy Goodwin"];
var i;

document.write("There are " + employee.length + " employees: <br><br>");
for (i = 0; i < employee.length; i++) {
    document.write(employee[i] + "<br>");
}

nameToRemove = employee.indexOf(prompt("Enter an employee name to remove:"));

if (nameToRemove > -1) {
  employee.splice(nameToRemove, 1);
}

document.write("<br>There are " + employee.length + " employees: <br><br>");
for (i = 0; i < employee.length; i++) {
    document.write(employee[i] + "<br>");
}

2 个解决方案

#1

Since you are using document.write to write the elements of the array to the document, it takes a little more time to reflect it to the user while the content has already been written to the DOM. I used the same code but instead of using document.write I used console.log and it worked as expected.

由于您使用document.write将数组的元素写入文档,因此在将内容写入DOM时,需要花费更多时间将其反映给用户。我使用相同的代码但不使用document.write我使用了console.log,它按预期工作。

The only workaround I could find in your case is to use the setTimeout function.

我能找到的唯一解决方法是使用setTimeout函数。

Check out this fiddle to see it in action

看看这个小提琴,看看它在行动

Also, the dialogue boxes such as alert and prompt stop the execution of the wholw javascript until an action is taken, this makes the reflection of the written content only possible after you click cancel or okay on the prompt box.

此外,诸如警报和提示之类的对话框会停止执行wholw javascript直到执行操作,这使得只有在单击取消或在提示框上单击时才能反映书面内容。

#2

probably is because javascript is asynchronous, you should use callback function to be sure that the first code is executed before running the rest.quick reference:

可能是因为javascript是异步的,你应该使用回调函数来确保在运行rest.quick引用之前执行第一个代码:

https://developer.mozilla.org/en-US/docs/Glossary/Callback_function https://www.w3schools.com/jquery/jquery_callback.asp

on the other side you can do the prompt inside the loop for the last element:

另一方面,你可以在循环中为最后一个元素做提示:

pseudo code:

for (i = 0; i < employee.length; i++) {
    document.write(employee[i] + "<br>");
    if (i == employee.length) {
        //do the prompt
    }
}

#1