How to break a callback chain in JavaScript? -
i uploading multiple files browser , need sequentially.
so chain next upload commencement previous upload completion callback.
it's simple , works fine.
during upload display progress user along cancel button.
if user hits cancel want stop entire callback chain.
how that? there mechanism in javascript halt callback chain?
ok here example of callback chain in javascript. question is, how break "cancel" button?
https://jsfiddle.net/jq7m9beq/
var filenamestoprocessqueue = ['v.jpg','w.jpg','x.jpg','y.jpg','z.jpg'] function finishedprocessing (filename) { console.log('finished processing: ' + filename) // processing finished file, start again chaining next 1 doprocessfiles() } function waitforeachfile (filename, callback) { // wait couple of seconds , log filename settimeout(function(){ console.log('waited 2 seconds for: ' + filename);callback(filename);}, 2000) } function doprocessfiles() { // next file process , remove queue @ same time filename = filenamestoprocessqueue.pop() // if file undefined queue empty if (typeof filename !== 'undefined') { console.log('process ' + filename) waitforeachfile(filename, finishedprocessing) } } doprocessfiles()
on click of cancel button, set flag
var cancelflag = false; document.getelementbyid("cancelbtn").addeventlistener("click", function(){ cancelflag = true; //other code });
change doprocess to
function doprocessfiles() { if (cancelflag) { return false; //this break chain } // next file process , remove queue @ same time filename = filenamestoprocessqueue.pop() // if file undefined queue empty if (typeof filename !== 'undefined') { console.log('process ' + filename) waitforeachfile(filename, finishedprocessing) } }
you can stop waiting
function waitforeachfile (filename, callback) { if (cancelflag) { return false; //this stop waiting } // wait couple of seconds , log filename settimeout(function(){ console.log('waited 2 seconds for: ' + filename);callback(filename);}, 2000) }
you can set flag in cancel button itself
document.getelementbyid("cancelbtn").setattribute("data-flag", "true");
and check value
var cancelflag = boolean(document.getelementbyid("cancelbtn").getattribute("data-flag"));
Comments
Post a Comment