JavaScript如何在函数中创建事件链，因此一个函数要等到另一个函数完成后才能启动？

Question

Working on code for personal site and I'm trying to rewrite code that is on the Internet so it's even easier to use for me.

The code is from http://cssdeck.com/labs/7bx7mmcm

How would it be possible to add a marker so that after fileToLoad.click(); is pushed through and completed, then loadFileAsText() goes? Much thanks in advance!

<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)

Code below directly is from above link:

"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

I like to use events whenever possible. JavaScript allows us to attach functions that are triggered when certain events occur such as clicking an element or when an element changes.

You could add a click event for #fileToLoad . This will fire as soon as the element is clicked.

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

If you want the function to run after the file has been chosen, then you can use a change event.

 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> 

Answer 2

You could use a callback function (like HarlemSquirrel's comment).

Assuming there is a fair amount of data posting and retrieval, you could also make get and post requests and define how the client handles the response. I included a vanillaJS link as it seems you're writing that way. A promise, as @Winter mentioned might be more convenient as it reduces the lines you'd write. I had heard a recent/abbreviated application of promises is fetch but I haven't used that yet. David Walsh has a concise comparison of the vanillaJS and fetch way.

Answer 3

Thanks HarlemSquirrel for the tip on "change". It led to Change- Event Reference and to find a way to target my input: How can I use querySelector on to pick an input element by name?

The way I wanted the interface to work is to choose the file and then have it automatically load:

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector('input[name="filetoloadname"]').onchange=changeEventHandler;
},false);

function changeEventHandler(event) {
loadFileAsText();
}


<body>
<input type="file" id="fileToLoad" name="filetoloadname">
</body>