jQuery - run multiple methods sequentially
Question
if i do:
method();
method();
both calls will run in parallel (at same time)
i just would like to make the second method(); wait until the first method(); is finished before to start, and do it dynamically cause i can't know how many times i will launch method(); at same time .
Is it possible?
just for example, those runs at same time as i can see... http://jsfiddle.net/Lcgb8/
5 answers
solution1
2 ACCPTED 2013-08-18 20:21:31
You could use then if you return a Deferred .
Eg
function method() {
var d = $.Deferred();
//do something async
setTimeout(function () {
d.resolve('some data'); //inform listeners that the process is completed
}, 2000);
return d; //return the deferred object
}
Then you could do:
method().then(method).then(method).then(method);
Note that the return value of each call will be passed as first argument to the next call, respectively.
EDIT: Here's an example on how you could queue the async operations dynamically.
function changeColorAsync(color) {
var d = $.Deferred();
setTimeout(function () {
$('body').css('background', color);
d.resolve();
}, 4000);
return d;
}
$(function () {
$('#color-form').on('submit', function (e) {
var color = $(this).find(':checked').val(), d;
d = d?
d.then(changeColorAsync.bind(this, color)) :
changeColorAsync(color);
return false;
});
});
solution2
1 2013-08-18 20:36:08
Here is a sequentially animation using transitionend
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
<style>
div{
width:50px;height:50px;background-color:#093;
-webkit-transition:all 300ms ease;
}
div.move{-webkit-transform:translate3d(200px,0,0);}/*GPU HW acceleration*/
</style>
<script>
(function(W){
var D,d,L,c=0;
function init(){
D=W.document;d=D.getElementsByTagName('div');L=d.length;var l=d.length;
while(l--){d[l].addEventListener('transitionend',next,false)}
next();
}
function next(){
d[c].classList[(d[c].className=='move'?'remove':'add')]('move');
c++;c=(c==L?0:c);
}
W.addEventListener('load',init,false);
})(window)
</script>
</head>
<body><div></div><div></div><div></div><div></div></body>
</html>
it had little error fixed now..
supports infinite div's and it's infinite loop using low resources. =)
your method() would be my next()
if someone want's to jsfiddle it... i don't use that.
ps.: pure javascript (no jquery) + css3 (with -webkit prefix);
example
solution3
0 2013-08-18 19:31:24
看看jQuery.queue（） 。
solution4
0 2013-08-18 20:10:23
Using callback :
var test = function (letter, callback) {
console.log(letter);
if (typeof callback !== 'undefined') {
callback();
}
};
Now you can run it:
test('a', function () {
test('b', function () {
test('c')
});
});
The result in console is:
a
b
c
Is it helpful to you?
solution5
-1 2013-08-18 19:42:58
$( "div" ).promise().done(function() {
$( "p" ).append( " Finished! " );
});
Hope this example must have cleared your query
Javascript, and most other languages, run code sequentially.
Therefore, they will not both run at the same time.
In fact, it is not possible to run two different pieces of Javascript code at the same time. However, in many other languages, it is possible using threads.
However, if they make AJAX calls, the corresponding server-side code called by both functions will run simultaneously. To prevent that, you'll need to make the first function accept a callback parameter and pass it the second function.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.