jQuery - 按顺序运行多个方法
[英]jQuery - run multiple methods sequentially
问题描述
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(); 在开始之前完成，并且动态地做，因为我不知道我将启动method（）多少次; at same time . 在同一时间 。
Is it possible? 可能吗？
just for example, those runs at same time as i can see... http://jsfiddle.net/Lcgb8/ 例如，那些在我能看到的同时运行... http://jsfiddle.net/Lcgb8/
5 个解决方案
解决方案1
2 已采纳 2013-08-18 20:21:31
You could use then if you return a Deferred . 如果您返回Deferred then可以使用then 。
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;
});
});
解决方案2
1 2013-08-18 20:36:08
Here is a sequentially animation using transitionend 这是使用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. 支持无限div，它是使用低资源的无限循环。 =) =）
your method() would be my next() 你的method()将是我的next()
if someone want's to jsfiddle it... i don't use that. 如果有人想要jsfiddle它...我不使用它。
ps.: pure javascript (no jquery) + css3 (with -webkit prefix); ps。：纯javascript（无jquery）+ css3（带-webkit前缀）;
example 例
解决方案3
0 2013-08-18 19:31:24
看看jQuery.queue（） 。
解决方案4
0 2013-08-18 20:10:23
Using callback : 使用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? 对你有帮助吗？
解决方案5
-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. Javascript和大多数其他语言按顺序运行代码。
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. 实际上，不可能同时运行两个不同的Javascript代码。 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. 但是，如果它们进行AJAX调用，则两个函数调用的相应服务器端代码将同时运行。 To prevent that, you'll need to make the first function accept a callback parameter and pass it the second function. 为了防止这种情况，您需要使第一个函数接受一个回调参数并将其传递给第二个函数。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.