javascript - javascript 如何在函数中创建一系列事件，以便一个函数在另一个函数完成之前不会启动？

Question

正在为个人网站编写代码，我正在尝试重写互联网上的代码，以便它对我来说更容易使用。

代码来自http://cssdeck.com/labs/7bx7mmcm

如何在 fileToLoad.click(); 之后添加一个标记？被推送并完成，然后 loadFileAsText() 继续吗？非常感谢!

<textarea id="BoxText4Load"></textarea>
<input type="file" id="fileToLoad" class="hidden">
<button id="loader">Loader</button>
<input id="inputFileNameToSaveAs" style="display: none;"></input>
<button onclick="saveTextAsFile()">Save file</button>

var loaderbutton = document.getElementById("loader");
loaderbutton.addEventListener('click', function(event){
fileToLoad.click();
setTimeout(function() {loadFileAsText(); }, 3000);
} , false)

下面的代码直接来自上面的链接:

"inputFileNameToSaveAs"

function saveTextAsFile(){
var textToWrite = document.getElementById("BoxText4Load").value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.URL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}

downloadLink.click();
}

function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}

function loadFileAsText()
{
var fileToLoad = document.getElementById("fileToLoad").files[0];

var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("BoxText4Load").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}

Answer 1

我喜欢使用events只要有可能。 JavaScript 允许我们附加在发生某些事件(例如单击元素或元素更改时)时触发的函数。

您可以为#fileToLoad 添加click 事件。单击该元素后就会触发该事件。

document.getElementById("loader").addEventListener('click', function(event){
  loadFileAsText()
}

如果您希望该函数在选择文件后运行，则可以使用 change 事件。

function loadFileAsText() {
  console.log('loadFileAsText running!')
}

var loaderbutton = document.getElementById('loader')
var fileToLoad = document.getElementById('fileToLoad')

loaderbutton.addEventListener('click', function(event){
  console.log('loaderbutton clicked!')
  fileToLoad.click()
} , false)

fileToLoad.addEventListener('change', function(event){
  loadFileAsText()
})

<textarea id="BoxText4Load"></textarea>
<input type="file" id="fileToLoad" class="hidden">
<button id="loader">Loader</button>
<input id="inputFileNameToSaveAs" style="display: none;"></input>
<button onclick="saveTextAsFile()">Save file</button>