javascript - 如何要求用户确认打开文件而不违反延迟响应？(How to ask for user confirmation to open a file without Violation of delayed response?)

Question

When I use user response to open a file but also ask him for confirmation, I get a "Violation" due to the delay until the user confirms to open the file.

(当我使用用户响应打开文件但又要求他确认时，由于直到用户确认打开文件之前的延迟，我都会收到“违规”。)

If the delay is more than a few seconds it is cancelled.

(如果延迟超过几秒钟，则将其取消。)

What is the solution?

(解决办法是什么？)

 async function fileopen(i) { var a = await readFile(i.files[0]); console.log("file opened"); } function askuser() { return confirm('Abort current mode?'); } function readFile(f) { return new Promise((resolve, reject) => { let fr = new FileReader(); fr.onload = x => resolve(fr.result); fr.readAsText(f); }) } 

 #bar { position: fixed; top: 0; width: 100%; height: 53px; font-family: "Verdana"; font-size: 17px; line-height: 50%; color: black; overflow: hidden; background-color: #000000; padding: 0px; margin: 0px; text-decoration: none; z-index: 100; display: inline-flexbox; opacity: 1; border: none; } .dbt { width: 120px; height: 53px; color: white; background-color: #000000; font-family: "Verdana"; font-size: 17px; text-align: center; border: none; padding: 16px 16px; text-decoration: none; cursor: pointer; z-index: 1000; display: block; } .dp { position: relative; top: 16px; left: -16px; min-width: 120px; border: none; background-color: #f9f9f9; font-family: "Verdana"; font-size: 14px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; display: none; } .dp a { font-family: "Verdana"; font-size: 16px; color: black; padding: 20px 16px 20px 16px; text-decoration: none; display: block; text-align: left; } #ddpack2 { position: fixed; left: 120px; } #dbtn2:hover { background-color: #a72727; } #dbtn2:hover #drop2 { display: block; } #drop2 a:hover { background-color: #eaeaea; } 

 <div id="bar"> <div id="ddpack2"> <button class="dbt" id="dbtn2" onclick="blur()">OPEN <div class="dp" id="drop2"> <a id="eof"><label for="inpId4" onclick="return askuser()">DATA</label></a> </div> </button> </div> <input id="inpId4" type="file" style="position: fixed; top: -140em" onchange="fileopen(this)"> </div> <div id="container"></div> 

Since I'm interested on a specific user action on a drop-down menu, I have included a simplified version of that menu on the code above.

(由于我对下拉菜单上的特定用户操作感兴趣，因此在上面的代码中包含了该菜单的简化版本。)

Hit F12 for Firefox or Ctrl+Shift+I for Opera or Chrome to see the console messages on this jsfiddle:

(在Firefox上按F12，在Opera或Chrome上按Ctrl + Shift + I，以查看此jsfiddle上的控制台消息：)

https://jsfiddle.net/fnyvkbr2/

(https://jsfiddle.net/fnyvkbr2/)

Violation message screenshot

(违规消息截图)

  ask by dllb translate from so

Answer 1

等待大神答复