I have been trying to wrap my head around jquery deferred and then functions. As I gather from jQuery then documentation, the then function sends the return value of the callback to the next then handler if they are so chained. Given that, why is my code not working as expected?
function log(message) {
var d = new Date();
$('#output').append('<div>' + d.getSeconds() + '.' + d.getMilliseconds() + ': ' + message + '</div>');
}
function asyncWait(millis) {
var dfd = $.Deferred();
setTimeout(function () {
var d = new Date();
log('done waiting for ' + millis + 'ms');
dfd.resolve(millis);
}, millis);
return dfd.promise();
}
function startTest0() {
return asyncWait(1000).then(asyncWait).then(asyncWait).then(asyncWait).done(function () {
log('all done, 4 times');
});
}
function startTest() {
asyncWait(500).then(function () {
return asyncwait(1000);
}).then(function () {
return asyncWait(1500);
}).then(function () {
return asyncWait(2000);
}).done(function () {
log('all done');
});
}
log('welcome');
log('starting test ...');
startTest0().done(function() { log('starting the second test'); startTest(); });
JS Fiddle here: Sample code. I was expecting a similar behavior in both tests but something eludes me. What am I missing?
Thanks in advance!
EDIT: See an updated DEMO where I am trying to chain the async operations to start after the previous one is done.
Except for one typo (asyncwait instead of asyncWait) your code works. Check below.
function log(message) {
var d = new Date();
$('#output').append('<div>' + d.getSeconds() + '.' + d.getMilliseconds() + ': ' + message + '</div>');
}
function asyncWait(millis) {
var dfd = $.Deferred();
setTimeout(function () {
var d = new Date();
log('done waiting for ' + millis + 'ms');
dfd.resolve(millis);
}, millis);
return dfd.promise();
}
function startTest0() {
return asyncWait(1000).then(asyncWait).then(asyncWait).then(asyncWait).done(function () {
log('all done, 4 times');
});
}
function startTest() {
asyncWait(500).then(function () {
return asyncWait(1000);
}).then(function () {
return asyncWait(1500);
}).then(function () {
return asyncWait(2000);
}).done(function () {
log('all done');
});
}
log('welcome');
log('starting test ...');
startTest0().done(function() { log('starting the second test'); startTest(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
Lesson to learn: Put any JS code through jshint before and after you fix bugs.
As i can see here, you are calling startTest0 function returning its promise object and calling then callback without returning new times into next then callback. I modified your startTest() into this :
function startTest() {
return asyncWait(500).then(function () {
asyncWait(1000);
return 1500; // here we pass to the next then
}).then(function (ms) { // ms here we got 1500
asyncWait(ms);
return 2000; // here we pass to the next then
}).then(function (ms) { // ms here we got 2000
asyncWait(ms)
return asyncWait(2500);
}).done(function () {
log('all done');
});
}
DEMO
Related
This question already has answers here:
How can I execute array of promises in sequential order?
(9 answers)
Closed 5 years ago.
$scope.SaveAuditItems = function (audit) {
var isError = false;
$scope.isProcessing = true;
var defer = $q.defer();
var promises = [];
for (var siteCounter = 0; siteCounter < audit.SessionSiteList.length; siteCounter++) {
for (var itemCounter = 0; itemCounter < audit.SessionSiteList[siteCounter].AuditItemList.length; itemCounter++) {
var item = audit.SessionSiteList[siteCounter].AuditItemList[itemCounter];
item.TotalItems = audit.SessionSiteList[siteCounter].AuditItemList.length;
item.CurrentItem = itemCounter;
promises.push($scope.submitaudit(item));
}
};
//It appears to be running all the promises in the array in parrallel then running CloseAudit.
$q.all(promises).then(
function (response) {
$scope.CloseAudit(audit.AuditSessionId).then(function () {
},
function(){
alert("done");
},
function(){
alert("done");
}
);
}).catch(function (exception) {
$scope.Loading("Could not submit audit session #'+ audit.AuditSessionId +' , please try again.", 2000);
});
}
How do make the promises run in consecutive order? It causes race conditions on the server data is being submitted to? This angular 1 code.
How do i use then when i do not know how many promises i will be running in sequence? All other answers use then but are always predefined count of promises. I cannot have a then within a then for ever..i can't seem to comprehend how i do this.
-------------------------------------edit 2---------------------------------------------
$scope.SaveAuditItems = function (audit) {
$ionicLoading.show({
template: '<i class="icon ion-loading-c"></i>Please wait..Sending Item ( 1 Of ' + $scope.AuditItemCounter + ' )',
}).then(function () {});
var isError = false;
$scope.isProcessing = true;
var defer = $q.defer();
var promises = [];
for (var siteCounter = 0; siteCounter < audit.SessionSiteList.length; siteCounter++) {
for (var itemCounter = 0; itemCounter < audit.SessionSiteList[siteCounter].AuditItemList.length; itemCounter++) {
var item = audit.SessionSiteList[siteCounter].AuditItemList[itemCounter];
item.TotalItems = audit.SessionSiteList[siteCounter].AuditItemList.length;
item.CurrentItem = itemCounter;
// $scope.Loading('Sending Item ( ' + item.CurrentItem + ' Of ' + item.TotalItems + ' )..', 0).then(function () {
promises.push($scope.submitaudit(item));
ConsoleLogger.AddLog('Sent Item ( ' + item.CurrentItem + ' Of ' + item.TotalItems + ' )');
//Loading.show({ template: '<i class="icon ion-loading-c"></i>Sending Item ' + item.CurrentItem + ' of ' + item.TotalItems + ' ', }).then(function () { });
$scope.Loading('Sent item ( ' + item.CurrentItem + ' Of ' + item.TotalItems + ' )', 0).then(function () {});
}
}
var all = promises.reduce(function (cur, next) {
return cur.then(next);
}, Promise.resolve(true));
all.then(function (a) {
$ionicLoading.show({
template: '<i class="icon ion-loading-c"></i>Finalising your audit..'
}).then(function () {
$scope.CloseAudit(audit.AuditSessionId).then(function () {
ConsoleLogger.AddLog('Audit submitted successfully.');
});
},
function () {
alert("doneeee");
},
function () {
alert("done");
}
);
});
You can see in the timing that the promises are not running in sequence as expected? What am i missing? I made the promises with a timeout of 7 seconds..
The closeaudit should have run after all the promises had returned but not happening for me!
GOT IT WORKING BY CHNAGING
promises.push($scope.submitaudit(item));
TO
promises.push(function(){return $scope.submitaudit(item)});
Here is a quick example how to do it. Reduce all promises from the array one by one, the reduce function will chain then() of each promise. It will start with first after the first has resolved it will call second and so on ... to the end ;].
var promises = [
function() { return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('resolve promise 1 after 3sec');
resolve('promise 1');
}, 3000)
})},
function() { return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('resolve promise 2 after 1.5sec');
resolve('promise 2');
}, 1500)
})},
function() { return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('resolve promise 3 after 2sec');
resolve('promise 3');
}, 2000);
})}];
var all = promises.reduce(function(cur, next) {
return cur.then(next);
}, Promise.resolve(true));
all.then(function(a) {
console.log('all are done!');
});
I'm trying to run through (using foreach) an array of objects and then for each I'd like to call a function that uses request to get a file and then unzips it with zlib, but one at a time, given the nature of node this is currently done asynchronously.
I'd like it to be done something like this...
- foreach - first object
- call function for first object
- when function has completed
- go to the next object in the array
I have tried using the SYNC module to try and solve this but with no luck.
Any ideas on how I can achieve this?
// the function i am trying to run for each in sync
var downloadUnzipFile = function(mID) {
try {
// Read File
console.log("Started download/unzip of merchant: " + mID + " # " + new Date().format('H:i:s').toString());
request(linkConst(mID))
// Un-Gzip
.pipe(zlib.createGunzip())
// Write File
.pipe(fs.createWriteStream(fileName(mID)))
.on('error', function(err) {
console.error(err);
})
.on('finish', function() {
console.log("CSV created: " + fileName(mID));
console.log("Completed merchant: " + mID + " # " + new Date().format('H:i:s').toString());
//console.log("Parsing CSV...");
//csvReader(fileName);
});
} catch (e) {
console.error(e);
}
}
module.exports = function(sMerchants) {
var oMerchants = JSON.parse(JSON.stringify(sMerchants));
sync(function() {
oMerchants.forEach(function eachMerchant(merchant) {
downloadUnzipFile(merchant.merchant_aw_id);
})
})
};
var promiseQueue = (function() {
'use strict';
var promiseQueue = function() {
var queue = [Promise.resolve(true)];
var add = function(cb) {
var args = Array.prototype.slice.call(arguments);
args.shift();
queue.unshift(new Promise(function(resolve) {
queue[0].then(function() {
resolve(cb.apply(null, args));
queue.pop();
});
}));
};
return {
add: add
}
}
return promiseQueue;
}());
usage EXAMPLE:
This is the asynch function that will be called
var theFun = function (time, n) { // use whatever arguments you like that will be called with your function
return new Promise(function(resolve) {
//asynch function goes here INSTEAD of the setTimeout and it's contents, I repeat, INSTEAD of the setTimeout
setTimeout(function() { // this is for demonstrating ONLY
console.log('resolving', n, time); // this is for demonstrating ONLY
resolve(time); // this is for demonstrating ONLY
}, time); // this is for demonstrating ONLY
// remember to resolve("someValueNotImportantAsItIsntUsedAnywhere") on completion of your asynch function
});
}
This is how the items get added to the queue - I did it this way because of MY use case
var pq = promiseQueue();
for(var i = 0; i < 5; i++ ) {
var r = 1000 - i * 150;
console.log('adding ', i, r);
pq.add(theFun, r, i);
}
Hope you find this of some use
First, your function needs to take a callback so it can communicate when it has finished:
var downloadUnzipFile = function(mID, next) {
try {
// Read File
console.log("Started download/unzip of merchant: " + mID + " # " + new Date().format('H:i:s').toString());
request(linkConst(mID))
// Un-Gzip
.pipe(zlib.createGunzip())
// Write File
.pipe(fs.createWriteStream(fileName(mID)))
.on('error', function(err) {
console.error(err);
})
.on('finish', function() {
console.log("CSV created: " + fileName(mID));
console.log("Completed merchant: " + mID + " # " + new Date().format('H:i:s').toString());
//console.log("Parsing CSV...");
//csvReader(fileName);
next();
});
} catch (e) {
console.error(e);
next();
}
}
Then, we need to recursively call each one when the previous has finished:
module.exports = function(sMerchants, next) {
var oMerchants = JSON.parse(JSON.stringify(sMerchants));
var i = 0;
var run = function() {
if(i < oMerchants.length)
downloadUnzipFile(i++, run);
else
next();
};
};
Note that I also added a callback to the exported function, so it can communicate when it is finished. If this is unnecessary, you can drop it.
This may work for you, uses Promise. Need to add resolve and reject callbacks to your downloadUnzipFile-
var exports = (function () {
'use strict';
var pre = document.getElementById('out');
function log(str) {
pre.appendChild(document.createTextNode(str + '\n'));
}
function downloadUnzipFile(id, resolve, reject) {
log('Start: ' + id);
try {
setTimeout(function () {
resolve(id);
}, 3000);
} catch (e) {
reject(e);
}
}
function done(id) {
log('Done: ' + id);
}
function error(e) {
log(e.message);
}
function getPromise(mID) {
return new Promise(function (resolve, reject) {
downloadUnzipFile(mID, resolve, reject);
});
}
return function (sMerchants) {
JSON.parse(sMerchants).reduce(function (next, mID) {
if (!next) {
next = getPromise(mID);
} else {
next = next.then(function (id) {
done(id);
return getPromise(mID);
}, error);
}
return next;
}, null).then(done, error);
};
}());
exports(JSON.stringify([1, 2, 3, 4, 5]));
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20150503/json2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
<script src="https://rawgit.com/jakearchibald/es6-promise/master/dist/es6-promise.min.js"></script>
<pre id="out"></pre>
I added the browser shims to support older browsers that may be viewing this, you shouldn't need them on node.js but you may need to require a Promise shim if you are using an old node.js.
I have written a function , which is returning a value. In my main i am calling the function like this:
var fn_return_val = lesson.select_lesson(lesson1_text);
console.log("returned value is : " + fn_return_val);
And my function implementation is like(other file.js) :
module.exports = {
select_lesson:
function select_lesson(lesson_name) {
console.log('\n ************************* Lessson name: ' + lesson_name);
var desiredOption, status;
var repeter = element.all(by.repeater('item in items'));
repeter.then(function (items) {
items.forEach(function (icon) {
console.log('\n ************************* item');
icon.getText().then(function (txt) {
if (txt == lesson_name) {
desiredOption = icon;
}
})
}).then(function clickOption() {
if (desiredOption) {
var el = desiredOption.all(by.css('[ng-click="launchActivity()"]'));
var el_progress = desiredOption.all(by.css('.pna-progress'));
var abc = el.getAttribute('value').then(function (txt) {
status = txt;
return status
});
el_progress.getAttribute('style').then(function (progress) {
console.log('\n ************************* Lessson progress : ' + progress);
});
el.click();
}
});
});
}
};
The problem is function is returning "undefined" value, and the print statement console.log("returned value is : " + fn_return_val);
is executing before the function implementation
Can anyone help me on resolving this?
This is all about promises and protractor's Control Flow.
You need to resolve the promise and log the results inside then:
lesson.select_lesson(lesson1_text).then(function(fn_return_val) {
console.log("returned value is : " + fn_return_val);
});
And you also need to return from a function:
function select_lesson(lesson_name) {
...
// return here
return repeter.then(function (items) {
...
}).then(function clickOption() {
...
});
});
}
I want to return a value inside a setInterval. I just want to execute something with time interval and here's what I've tried:
function git(limit) {
var i = 0;
var git = setInterval(function () {
console.log(i);
if (i === limit - 1) {
clearInterval(git);
return 'done';
}
i++;
}, 800);
}
var x = git(5);
console.log(x);
And it's not working.
Is there any other way?
What I'm going to do with this is to do an animation for specific time interval. Then when i reached the limit (ex. 5x blink by $().fadeOut().fadeIn()), I want to return a value.
This is the application:
function func_a(limit) {
var i = 0;
var defer = $.Deferred();
var x = setInterval(function () {
$('#output').append('A Running Function ' + i + '<br />');
if (i == limit) {
$('#output').append('A Done Function A:' + i + '<br /><br />');
clearInterval(x);
defer.resolve('B');
}
i++;
}, 500);
return defer;
}
function func_b(limit) {
var c = 0;
var defer = $.Deferred();
var y = setInterval(function () {
$('#output').append('B Running Function ' + c + '<br />');
if (c == limit) {
$('#output').append('B Done Function B:' + c + '<br /><br />');
clearInterval(y);
defer.resolve('A');
}
c++;
}, 500);
return defer;
}
func_a(3).then( func_b(5) ).then( func_a(2) );
This is not functioning well, it should print A,A,A,Done A,B,B,B,B,B,Done B,A,A,Done A but here it is scrambled and seems the defer runs all function not one after the other but simultaneously. That's why I asked this question because I want to return return defer; inside my if...
if (i == limit) {
$('#output').append('A Done Function A:' + i + '<br /><br />');
clearInterval(x);
defer.resolve('B');
// planning to put return here instead below but this is not working
return defer;
}
Do you expect it to wait until the interval ends? That would be a real pain for the runtime, you would block the whole page. Lots of thing in JS are asynchronous these days so you have to use callback, promise or something like that:
function git(limit, callback) {
var i = 0;
var git = setInterval(function () {
console.log(i);
if (i === limit - 1) {
clearInterval(git);
callback('done');
}
i++;
}, 800);
}
git(5, function (x) {
console.log(x);
});
Using a promise it would look like this:
function git(limit, callback) {
var i = 0;
return new Promise(function (resolve) {
var git = setInterval(function () {
console.log(i);
if (i === limit - 1) {
clearInterval(git);
resolve('done');
}
i++;
}, 800);
});
}
git(5)
.then(function (x) {
console.log(x);
return new Promise(function (resolve) {
setTimeout(function () { resolve("hello"); }, 1000);
});
})
.then(function (y) {
console.log(y); // "hello" after 1000 milliseconds
});
Edit: Added pseudo-example for promise creation
Edit 2: Using two promises
Edit 3: Fix promise.resolve
Try to get a callback to your git function.
function git(limit,callback) {
var i = 0;
var git = setInterval(function () {
console.log(i);
if (i === limit - 1) {
clearInterval(git);
callback('done') // now call the callback function with 'done'
}
i++;
}, 800);
}
var x = git(5,console.log); // you passed the function you want to execute in second paramenter
I am trying to eliminate the "callback pyramid of DOOM" by doing this:
$$( //my function
function(next) { // <- next is the next function
setTimeout(next,1000); // simple async function
},
function(next){ // this function is the previous's function "next" argument
waitForSomethingAndReturnAValue(next, "I am a parameter!");
},
function(aValue){
console.log("My value is:" + aValue);
}
);
BUT I have been fiddling for about an hour, and my code doesn't work, any help? this is what I got so far:
function $$(){
for (a in arguments){
arguments[a] = function(){
arguments[a](arguments[Math.max(-1, Math.min(a+1, arguments.length-1))]);
};
}
arguments[0]();
}
Something like this works:
function $$() {
if (arguments.length <= 0) return;
var args = Array.prototype.slice.call(arguments); // convert to array
arguments[0](function () { $$.apply(null, args.slice(1)); });
}
$$(function(next) { alert("one"); next() }, function (next) { alert("two"); next() });
http://jsfiddle.net/Cz92w/
You can try this:
function $$(){
var i=0, ret, args = [].slice.call(arguments);
var obj = {
next: function() {
ret = args[i++].call(obj, ret);
}
};
obj.next();
}
and use it like this:
$$(
function() {
console.log(Date() + ' - Function 1');
setTimeout(this.next, 1e3); // simple async function
},
function(){
console.log(Date() + ' - Function 2');
return waitForSomethingAndReturnAValue(this.next, "I am a parameter!");
},
function(aValue){
console.log(Date() + ' - Function 3');
console.log("My value is:" + aValue);
}
);
function waitForSomethingAndReturnAValue(callback, param) {
setTimeout(callback, 2e3);
return param + param;
}
Basically, the returned value in each function is passed as the argument to the next one. And the reference to the next function is this.next.