Asynchronous Javascript isn't synchronous it doesn't wait for array processes complete on drop event

Question

Problem is below I have a arr_x array, and I call "call_when_drop" function like below:

<body ondrop="call_when_drop(event,this);" ></body>

Then it begin to create array elements.when I console log array length I see only 1, but when I console log a few seconds later I see all number of members of array.But interesting thing is that when I console.log array it self I am able to see all elements.

below function is belong to here Does HTML5 allow drag-drop upload of folders or a folder tree?

var arr_x=[];
     function traverseFileTree(item, path,connection_time) {
        if(arr_x.length>25){
            return arr_x;
        }
        arr_x[arr_x.length]=arr_x.length;

  path = path || "";
  if (item.isFile) {
  } else if (item.isDirectory) {

    var dirReader = item.createReader();
    //console.log(dirReader);
    dirReader.readEntries(function(entries) {

      var dir=[];
      for (var i=0; i<entries.length; i++) {

       traverseFileTree(entries[i], path + item.name + "/",connection_time);


      }

    });
  }

  return arr_x;
}

This function called when user drop folder to browser

function call_when_drop(e,element){


 var items = e.dataTransfer.items;

    for (var i = 0, item; item = items[i]; ++i) {

      if (item.kind == 'file') {


          var a = traverseFileTree(item.webkitGetAsEntry(),"");


       console.log(arr_x);
     console.log('with_setTimeout');
        console.log(arr_x.length);
     console.log('---------------------------------------');
     setTimeout(function(){

        console.log('with_setTimeout');
        console.log(arr_x.length);

     },300);

      }
    }


}

Note: I notice that if I change traverseFileTree function like below it works but I need before function's working version

 function traverseFileTree(item, path,connection_time) {
if(arr_x.length>25){
    return arr_x;
}


arr_x[arr_x.length]=arr_x.length;
  traverseFileTree();
  return arr_x;
}

Research callbacks. Reading from streams does not block IO. Its basically doing all those at the same time and you are not awaiting them to finish — Matt Greenberg
– Matt Greenberg, Commented Dec 29, 2016 at 5:07
@magreenberg please watch my updated question,and how can I fix that? — user7352487
– user7352487, Commented Dec 29, 2016 at 5:10
javascript has a bug which is it doesnt wait - your actual problem is asynchronous javascript isn't synchronous — Jaromanda X
– Jaromanda X, Commented Dec 29, 2016 at 5:10
@JaromandaX okay I have changed title, how can I fix this problem? — user7352487
– user7352487, Commented Dec 29, 2016 at 5:12

Jaromanda X · Accepted Answer · 2016-12-29 15:51:58Z

0

As this is clearly a chrome only question (webkitGetAsEntry function limits the usage) I can see how you could do it using good ol' Promises - not that only Chrome supports Promises, it's just that as it's a Chrome question, I can be certain Promises are available

Note: I see that at least firefox actually HAS webkitGetAsEntry function!!!)

var readEntriesPromise = function() {
    return new Promise((resolve, reject) => this.readEntries(resolve, reject));
};

function traverseFileTree(item, path, connection_time) {
    path = path || "";
    if (item.isDirectory) {
        var dirReader = item.createReader();
        dirReader.readEntriesPromise = readEntriesPromise;
        return dirReader.readEntriesPromise()
            .then(entries => entries.filter(entry => entry.isDirectory))
            .then(dirs => Promise.all(dirs.map(entry => traverseFileTree(entry, path + item.name + "/", connection_time))))
            .then(result => [].concat.apply([path + item.name], result));
    } else {
        return Promise.resolve("NO FOLDER"); // initial item was not a folder
    }
}

function call_when_drop(e, element) {
    var items = e.dataTransfer.items;
    [].filter.call(items, item => item.kind == 'file')
        .forEach(file => traverseFileTree(file.webkitGetAsEntry(), "")
            .then(function(results) {
                console.log(results);
            })
        )
}

Have tested in Firefox now that I know it has the webkitGetAsEntry function - proof of concept - https://jsfiddle.net/a5cggfq3/3/

edited Dec 29, 2016 at 15:51

answered Dec 29, 2016 at 6:05

Jaromanda X

1

Sign up to request clarification or add additional context in comments.

15 Comments

user7352487 Over a year ago

I need to detect index of dirReader like before in for

Jaromanda X Over a year ago

why, you don't use it anywhere

Jaromanda X Over a year ago

results in the final console.log is an array - therefore, each entry has an index

user7352487 Over a year ago

I have tested but when I drop folder which contain child folders, it doesnt work and only console.log parent folder

Jaromanda X Over a year ago

Really? I tested a folder with 37 subfolders and sure enough got 38 entire in the final result

|

Collectives™ on Stack Overflow

Asynchronous Javascript isn't synchronous it doesn't wait for array processes complete on drop event

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related