Wiered behaviour by Javascript

Question

I have the following Java Script code fragment:

function upoload_TC(evt) {
    var file = evt.target.files[0];
    if(file.type != 'text/plain'){
        evt.target.style='color:red;';
    }
    else{
        var app_data='';
        reader = new FileReader();
        reader.onload = function(){
            app_data = reader.result;
        };
        reader.readAsText(file);

        if (evt.target.id[7]=='2') {
/* area of intrest begin: */
            var packet_order = get_packet_order(evt.target);
            console.log("1st");
            var app_data1 = app_data.split('\n');
            console.log("app_data: ");
            console.log(app_data);
            console.log("app_data1: ");
            console.log(app_data1);
/* area of intrest end */
            for(var i=0; i<app_data1.length; ++i){
                console.log("3st");
                if(app_data1[i][0] == '!'){
                    app_data1.splice(i,1);
                    --i;
                    console.log(app_data1);
                }
                console.log(app_data);
                ...
            }
        }
    }
}

app_data have a long string.

After execution, sometimes app_data1 do not have any content logged.
Observation: When I execute it step by step in the debugger, app_data1 has the expected value. But if my 1st break point is after the assignment statement for app_data1, it's empty.

How can I fix this?

I found a call_back and promises to tackle this kind issues for user-defined functions. Since split() is not defined by me, I think these won't work.
I believe timeout is not the correct way to do this. Is it?

Please find the video of debugger window here.

Your understanding is incorrect. The statements you have there will execute in the order written. The log will never run before the split finishes. — dmeglio, Dec 03 '16 at 03:51
i suspect the code you provided is not your real code so I can't really answer that. — dmeglio, Dec 03 '16 at 03:53

score 1 · Accepted Answer · answered Dec 07 '16 at 20:04

1

You should be doing the logging / processing inside the onload callback. In your example code, you're setting the value for app_data on the load event, which is fired after the asynchronous function readAsText finishes its thing. By that time the logging / processing code has already been executed.

answered Dec 07 '16 at 20:04

Dan

9,912
18
49
70

So are you saying that the code marked to be `area of interest` get executed even before `reader.readAsText(file);` finishes loading `reader`? So moving `if` block inside `onload` should work. - I will try. – Jithin Pavithran Dec 07 '16 at 20:14
Could you please explain why was the content non-empty while debugging? – Jithin Pavithran Dec 07 '16 at 20:18
1

Because when you're debugging line by line, `readAsText` will be finished executing before you get to your line of interest, and as such you'll have a value for `app_data`. – Dan Dec 08 '16 at 12:43

score 0 · Answer 2 · answered Dec 03 '16 at 03:50

0

Try this:

var stringSplit = function (str) {
  return new Promise(function (resolve, reject) {
    var splittedString = str.split('\n'); 
    return resolve(splittedString);
  });
}

var veryLongStr = "very long string";
stringSplit(veryLongStr).then(function (splittedString) {
  console.log(splittedString);
});

answered Dec 03 '16 at 03:50

notme

424
5
14

1

I realise the OP hadn't yet provided his full code at the time you answered, but why would you wrap a synchronous function call like `.split()` in a promise? – nnnnnn Dec 03 '16 at 04:49

Wiered behaviour by Javascript

2 Answers2