Using callback for asynchronous in javascript

Asked Mar 23 '18 at 14:49

Active Mar 23 '18 at 15:25

Viewed 33 times

I know nowaday it has promise or await async for asynchronous things in javascript. I just trying figure out how callback work and use it for real. I have something like this

// HTML
<input type="file" id="file-to-load" />
<button onClick="handleFile()">SHOW DATA</button>

// JS
function readData(callback) {
  var data;

  var fileToLoad = document.getElementById("file-to-load").files[0];
  var fileReader = new FileReader();
  fileReader.readAsText(fileToLoad, "UTF-8");
  fileReader.onload = function (fileLoadedEvent) {
    data = fileLoadedEvent.target.result;
  }

  callback(data);
}

function showData(data) {
  console.log(data);
}

function handleFile() {
  readData(showData);
}

My purpose is execute function showData() only when function readData() has finished. Using all I learned about callback with the code above, but console give undefined for first button click. It display correct data after second click.
Why was that happen ?

edited Mar 23 '18 at 15:25

asked Mar 23 '18 at 14:49

dungmidside

3

How did it not work? What happened and what was expected? – H.B. Mar 23 '18 at 14:51
`get data from api/textbox..` if any of this is `async` your callback is going to trigger before it's ready. – Keith Mar 23 '18 at 14:54
2

Show us the actual code, not some pseudo comments. That's exactly the section where your problem lies. – Bergi Mar 23 '18 at 14:57
@Bergi I just edited my questions. My stupid bad, sorry guys – dungmidside Mar 23 '18 at 15:27
1

@huudunghcmus Thanks. Yes, you need to move the `callback(data);` *inside* the onload handler – Bergi Mar 23 '18 at 16:21
Thanks you so much. That solved my problem <3 – dungmidside Mar 23 '18 at 17:03

Using callback for asynchronous in javascript

0 Answers0