html - JavaScript global variable value does not change until after alerted -
this first question , hope don't wrong. first of all, thank reading.
and problem is...
design read data in text file javascript, process them through number of functions before creating content display in html div. after searching, figured done xmlhttprequest. because read data processed functions, decided store them global variable easy access. code seemed working fine @ first , print obtained data div. noticed strange bug. if assign data global variable , attempt retrieve them later, assigned value or undefined. try alert global variable's value , see above. however, if alert again, value changes needed. have been learning javascipt short while, facing error leaves me @ lost.
the html file:
<html> <head> <meta charset="utf-8"> <title>read file</title> <script> var output = ["next"]; function edit() { var rawfile = new xmlhttprequest(); rawfile.open("get", "test.txt", true); rawfile.responsetype = "text"; rawfile.onreadystatechange = function () { if(rawfile.readystate === 4) { if(rawfile.status === 200 || rawfile.status == 0) { output[0] = rawfile.responsetext; //alert("reading okay!"); } } }; rawfile.send(null); console.log(output[0]); // initial value alert(output[0]); // initial value console.log(output[0]); // desired value alert(output[0]); // desired value } </script> </head> <body> <button onclick="edit()">read test.txt</button> </body> </html> the text file:
this content of text file. temporarily, have alert every single time text file read isn't idea solve problem.
question is, above design, there better way implement without having deal bug?
, here demo: html , text.
thank much.
since ajax call asynchronous, being executed after edit function returns... since sounds passing data through series of functions, suggest using promise library (q.js instance). here simple jsfiddle demonstrates using q.js.
your ajax call resolve promise, kicking off chain of functions execute. example shows modifying data @ each step, not necessary. return value of prior function used input next function. i've commented out ajax stuff , used settimeout mimic async call:
//global variable test.txt var test; function edit() { /* var deferred = q.defer(); var rawfile = new xmlhttprequest(); rawfile.open("get", "test.txt", true); rawfile.responsetype = "text"; rawfile.onreadystatechange = function () { if(rawfile.readystate === 4) { if(rawfile.status === 200 || rawfile.status == 0) { //resolve promise responsetext; deferred.resolve(rawfile.responsetext); } } }; deferred.promise .then(processstep1) .then(processstep2) .then(processstep3); */ //imitating async call finish after 2 seconds var deferred; var promise; //if haven't read file yet, make async call if (test === undefined) { deferred = q.defer(); settimeout(function () { test = "this content of text file." deferred.resolve(test); }, 2000); promise = deferred.promise; } //else we've read file. else { promise = q(test); } //start adding functions process text here: promise.then(processstep1) .then(processstep2) .then(processstep3); } function processstep1(data) { alert("step 1: " + data); //adding stuff onto data example data = data + "... , more data."; return data; } function processstep2(data) { alert("step 2: " + data); data = "adding data front. " + data; return data; } function processstep3(data) { alert("step 3: " + data); return data; } above, use global variable (test) data retrieved async call. check value when deciding if need make async call value, or use value populated original async call. use whatever pattern fits needs.
i recommend library doing async calls project might messy fast doing raw ajax calls.
Comments
Post a Comment