Why does the code under the done() statement execute before the other 3 function which are called under when()? It goes immediately. I thought when was used to queue up functions and done was used to execute something when the when code was, well, done...
$(document).on('click', '.ajax', function() {
$.when(func1('<p>first</p>'), func2('<p>second</p>'), func3('<p>third</p>')).done(function() {
$('body').append('all done');
});
});
function func1(first) {
var t = setTimeout(function() {
$('body').append(first);
}, 800);
return "success";
}
function func2(second) {
var t = setTimeout(function() {
$('body').append(second);
}, 2700);
return "success";
}
function func3(third) {
var t = setTimeout(function() {
$('body').append(third);
}, 200);
return "success";
}
http://jsfiddle.net/loren_hibbard/NhAFN/
You need to use $.Deferred() and return promise.
function func1(first) {
var dfd = $.Deferred();
var t = setTimeout(function() {
$('body').append(first);
dfd.resolve();
}, 800);
return dfd.promise();
}
http://jsfiddle.net/NhAFN/2/
Related
In the below code, while trying to call self.checkValue from the callback inside accounts.getValue, the function is not being called.
Also when trying to call self.checkValue() from setTimeout callback, getting error that checkValue is not defined.
checkValue: function(resp) {
var self = this;
if (resp && !resp.value) {} else {
if (getcount < 3) {
setTimeout(function() {
getcount++;
// self.checkValue();
accounts.getValue({
callback: self.checkValue
});
}, 2000);
}
}
},
setValue: function() {
var self = this;
accounts.getValue({
callback: self.checkValue
});
},
I have a problem in regards to using .execute in Nightwatch.
When I run this code in the DOM, it works perfectly. However when I wrap it in an execute command in Nightwatch, it does not even make it to the first click. So probably the execute command is never being executed.
What am I doing wrong?
Thanks in advance
LoopThroughQuestions: function() {
this.waitForElementVisible('.next-button', constants.timeout.medium);
this.api.execute(function() {
var checkQuestion = function() {
var nextButton = document.querySelector('.next-button');
var answers = document.querySelectorAll('.flex-row.key');
answers[0].click();
nextButton.click();
setTimeout(function () {
if (document.querySelector('.next-button')) {
checkQuestion();
} else {
console.log("Exit");
}
}, 2000, "Running")
}
}, []) ;
return this;
},
You have defined the variable checkQuestion as a function, but you never call that function.
Try something like this:
LoopThroughQuestions: function() {
this.waitForElementVisible('.next-button', constants.timeout.medium);
this.api.execute(function() {
var checkQuestion = function() {
var nextButton = document.querySelector('.next-button');
var answers = document.querySelectorAll('.flex-row.key');
answers[0].click();
nextButton.click();
setTimeout(function () {
if (document.querySelector('.next-button')) {
checkQuestion();
} else {
console.log("Exit");
}
}, 2000, "Running")
checkQuestion();
}
}, []) ;
return this;
},
Recall that you can use a self invoking, anonymous function, too.
(function () {
// body of the function
}());
For people who experience the same problem; I fixed it with executeAsync, the script was being executed but the waiting on an element was insufficient
TestLoop: function() {
this.waitForElementVisible('.next-button', constants.timeout.medium);
this.api.executeAsync(function() {
let checkQuestion = function() {
let nextButton = document.querySelectorAll('.next-button');
let answers = document.getElementsByClassName('flex-row');
let blueButton = document.querySelectorAll('.blue-inverse-button').length;
answers[0].click();
nextButton[0].click();
setTimeout(() => {
if (document.querySelectorAll('.next-button')) {
console.log('Answering another question!');
checkQuestion();
}
if (blueButton === 1){
blueButton[0].click()
checkQuestion()
}
else {
console.log("Exiting?");
}
}, 2000);
};
// Initiating the check question function
return checkQuestion();
},[], function(){
console.log('Done?')
});
},
How to call the second function after the all previous functions is done.
function first() {
// code here
setTimeout( function() {
// code here
}, 1000);
// code here
setTimeout( function() {
// code here
}, 3000);
// code here
setTimeout( function() {
// code here
}, 3800);
}
function second() {
// code here
}
first();
first();
second();
first();
second();
It seems all functions executed in the same time.
Thanks a lot.
If you need to call a specific function after the last timeout, I think this will point you in the right direction. Of course, it can be written better, with reusable "class" etc.
function myTimeout(f,t) {
var p = new Promise(resolve=>{
setTimeout(()=>{
resolve(f.apply(this,[]));
}, t);
});
//return p.promise();
return p;
}
function first() {
var numberOfTimeouts = 3
// code here
myTimeout(()=>{
// code here
console.log('a')
}, 1000).then(()=>{
numberOfTimeouts--;
if (!numberOfTimeouts) second()
});
// code here
myTimeout( function() {
console.log('b')
}, 3000).then(()=>{
numberOfTimeouts--;
if (!numberOfTimeouts) second()
});
// code here
myTimeout( function() {
console.log('c')
}, 3800).then(()=>{
numberOfTimeouts--;
if (!numberOfTimeouts) second()
});
}
function second() {
console.log('d')
}
first();
I have an array of functions, which making some logic asynchronously (e.g. ajax calls). How does look like function, which will sequentially call functions from array?
var saveHandlers = [];
saveHandlers.push(function () {
var deferred = $.Deferred();
setTimeout(function() {
deferred.resolve();
}, 2000);
return deferred.promise();
});
saveHandlers.push(function () {
var deferred = $.Deferred();
setTimeout(function() {
deferred.resolve();
}, 2000);
return deferred.promise();
});
$(function () {
var $form = $('#form');
$form
.unbind('submit')
.submit(function (e) {
if (saveHandlers.length > 0) {
$.when.apply(null, saveHandlers);
}
e.preventDefault();
});
});
Write a function which calls you async function and takes the array index as an argument.
In the callback for the async function, increment the index and (if you haven't got to the end of the array) call the function recursively with the new index.
var foo = [fun_a, fun_b, fun_c];
function bar(index) {
index = index || 0;
function callback() {
if (foo[++index]) {
bar(index);
}
};
foo[index]().then(callback);
}
I have a web app which must call the server multiple times. So far, I had a long nested callback chain; but I would like to use jQuery's when,then etc. functionality. However, I can't seem to get stuff running again after using a then.
$
.when ($.get('pages/run-tool.html'))
.then (function (args)
{
// This works fine
alert(args);
$('#content').replaceWith (args);
$('#progress-bar').progressbar ({value: 0});
})
.then ($.get('pages/test.html'))
.done (function(args)
{
// This prints the same as the last call
alert (args);
});
What am I doing wrong? I guess its some scoping issue, as I can see the second get call being executed. Using two different args variables does not help as the argument passed to the done function is still the first get request.
As an update:
With modern jquery (1.8+) you don't need the preliminary when because get returns a Deferred Promise.
Also, pipe is deprecated. Use then instead. Just be sure to return the result of the new get which becomes the Promise attached to by subsequent then/*done*/fail calls.
So:
$.get('pages/run-tool.html')
.then (function (args) { // this will run if the above .get succeeds
// This works fine
alert(args);
$('#content').replaceWith (args);
$('#progress-bar').progressbar ({value: 0});
})
.then (function() { // this will run after the above then-handler (assuming it ran)
return $.get('pages/test.html'); // the return value creates a new Deferred object
})
.done (function(args) { // this will run after the second .get succeeds (assuming it ran)
alert (args);
});
All three callbacks (the two with then and the one with done) are applied to the same request – the original when call. This is because then returns the same Deferred object, rather than a new one, so that you can add multiple event handlers.
You need to use pipe instead.
$
.when ($.get('pages/run-tool.html'))
.then (function (args)
{
// This works fine
alert(args);
$('#content').replaceWith (args);
$('#progress-bar').progressbar ({value: 0});
})
.pipe (function() {
return $.get('pages/test.html'); // the return value creates a new Deferred object
})
.done (function(args)
{
alert (args);
});
Here is an wonderfully simple and highly effective AJAX chaining / queue plugin. It will execute you ajax methods in sequence one after each other.
It works by accepting an array of methods and then executing them in sequence. It wont execute the next method whilst waiting for a response.
//--- THIS PART IS YOUR CODE -----------------------
$(document).ready(function () {
var AjaxQ = [];
AjaxQ[0] = function () { AjaxMethod1(); }
AjaxQ[1] = function () { AjaxMethod2(); }
AjaxQ[3] = function () { AjaxMethod3(); }
//Execute methods in sequence
$(document).sc_ExecuteAjaxQ({ fx: AjaxQ });
});
//--- THIS PART IS THE AJAX PLUGIN -------------------
$.fn.sc_ExecuteAjaxQ = function (options) {
//? Executes a series of AJAX methods in dequence
var options = $.extend({
fx: [] //function1 () { }, function2 () { }, function3 () { }
}, options);
if (options.fx.length > 0) {
var i = 0;
$(this).unbind('ajaxComplete');
$(this).ajaxComplete(function () {
i++;
if (i < options.fx.length && (typeof options.fx[i] == "function")) { options.fx[i](); }
else { $(this).unbind('ajaxComplete'); }
});
//Execute first item in queue
if (typeof options.fx[i] == "function") { options.fx[i](); }
else { $(this).unbind('ajaxComplete'); }
}
}
The answer cdr gave, which has the highest vote at the moment, is not right.
When you have functions a, b, c each returns a $.Deferred() object, and chains the functions like the following:
a().then(b).then(c)
Both b and c will run once the promise returned from a is resolved. Since both then() functions are tied to the promise of a, this works similiar to other Jquery chaining such as:
$('#id').html("<div>hello</div>").css({display:"block"})
where both html() and css() function are called on the object returned from $('#id');
So to make a, b, c run after the promise returned from the previous function is resolved, you need to do this:
a().then(function(){
b().then(c)
});
Here the call of function c is tied to the promise returned from function b.
You can test this using the following code:
function a() {
var promise = $.Deferred();
setTimeout(function() {
promise.resolve();
console.log("a");
}, 1000);
return promise;
}
function b() {
console.log("running b");
var promise = $.Deferred();
setTimeout(function () {
promise.resolve();
console.log("b");
}, 500);
return promise;
}
function c() {
console.log("running c");
var promise = $.Deferred();
setTimeout(function () {
promise.resolve();
console.log("c");
}, 1500);
return promise;
}
a().then(b).then(c);
a().then(function(){
b().then(c)
});
Change the promise in function b() from resolve() to reject() and you will see the difference.
<script type="text/javascript">
var promise1 = function () {
return new
$.Deferred(function (def) {
setTimeout(function () {
console.log("1");
def.resolve();
}, 3000);
}).promise();
};
var promise2 = function () {
return new
$.Deferred(function (def) {
setTimeout(function () {
console.log("2");
def.resolve();
}, 2000);
}).promise();
};
var promise3 = function () {
return new
$.Deferred(function (def) {
setTimeout(function () {
console.log("3");
def.resolve();
}, 1000);
}).promise();
};
var firstCall = function () {
console.log("firstCall");
$.when(promise1())
.then(function () { secondCall(); });
};
var secondCall = function () {
console.log("secondCall")
$.when(promise2()).then(function () { thirdCall(); });
};
var thirdCall = function () {
console.log("thirdCall")
$.when(promise3()).then(function () { console.log("done"); });
};
$(document).ready(function () {
firstCall();
});
</script>
I thought I would leave this little exercise here for anyone who may find it useful, we build an array of requests and when they are completed, we can fire a callback function:
var urls = [{
url: 'url1',
data: 'foo'
}, {
url: 'url2',
data: 'foo'
}, {
url: 'url3',
data: 'foo'
}, {
url: 'url4',
data: 'foo'
}];
var requests = [];
var callback = function (result) {
console.log('done!');
};
var ajaxFunction = function () {
for (var request, i = -1; request = urls[++i];) {
requests.push($.ajax({
url: request.url,
success: function (response) {
console.log('success', response);
}
}));
}
};
// using $.when.apply() we can execute a function when all the requests
// in the array have completed
$.when.apply(new ajaxFunction(), requests).done(function (result) {
callback(result)
});
My way is to apply callback function:
A(function(){
B(function(){
C()})});
where A, B can be written as
function A(callback)
$.ajax{
...
success: function(result){
...
if (callback) callback();
}
}