Javascript 在javascript中制作同步功能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27012556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make synchronous function in javascript?
提问by GatesPlan
I wanna synchronized functions just like jQuery's $.ajax({ .., async: false, .. });.
我想要像 jQuery 的$.ajax({ .., async: false, .. });.
function A() { lalala .. };
function B() { dadada .. };
function C() { .. };
, those all including some effect like fadeIn, Out, slide... etc.
，那些都包括一些效果，如淡入、淡出、幻灯片......等。
However I just found if those functions called like below..
但是我刚刚发现这些函数是否像下面这样调用..
A();
B();
C();
All effect start at almost same time. In my understanding, this happens because the function called synchronously but it doesn't mean that function B() started after function A() was completely finished.. right?
所有效果几乎同时开始。据我了解，发生这种情况是因为该函数是同步调用的，但这并不意味着函数 B() 是在函数 A() 完全完成后启动的。对吗？
Then, how can I make those functions work in order?
那么，我怎样才能让这些功能正常工作呢？
I found a way use callback function but it's not enough for me..
我找到了一种使用回调函数的方法，但这对我来说还不够..
回答by Jason Evans
Have a look at using jQuery $.Deferred();
看看使用 jQuery $.Deferred();
That can allow you to run each function in sequence, one waiting after the other. For example:
这可以让您按顺序运行每个函数，一个接一个等待。例如：
var a = function() {
var defer = $.Deferred();
console.log('a() called');
setTimeout(function() {
defer.resolve(); // When this fires, the code in a().then(/..../); is executed.
}, 5000);
return defer;
};
var b = function() {
var defer = $.Deferred();
console.log('b() called');
setTimeout(function () {
defer.resolve();
}, 5000);
return defer;
};
var c = function() {
var defer = $.Deferred();
console.log('c() called');
setTimeout(function () {
defer.resolve();
}, 5000);
return defer;
};
a().then(b).then(c);
Using defer.resolve();means you can control when the function yields execution to the next function.
使用defer.resolve();意味着您可以控制函数何时将执行交给下一个函数。
回答by Pieter Beulque
You have indeed specified three synchronous functions, meaning B will only trigger when A has finished.
您确实指定了三个同步函数，这意味着 B 只会在 A 完成时触发。
However, doing asynchronous tasks like starting an animation won't stop A from completing, so it appears that B isn't waiting until completion.
但是，执行异步任务（例如启动动画）不会阻止 A 完成，因此 B 似乎不会等到完成。
Read about jQuery Deferreds. Deferreds is a design pattern, so it's not specific to jQuery, however they have a great implementation.
阅读 jQuery Deferreds。Deferreds 是一种设计模式，因此它不是特定于 jQuery 的，但是它们有很好的实现。
function methodA () {
var dfd = $.Deferred();
console.log('Start A');
// Perform async action, like an animation or AJAX call
$('#el').slideOut(2000, function () {
// This callback executes when animation is done.
console.log('End A');
dfd.resolve();
});
// Return unchangeable version of deferred.
return dfd.promise();
};
function methodB () {
console.log('Start B');
};
methodA().then(methodB);
回答by Alexander T.
I suppose that each function makes some ajax request or animation
我想每个函数都会发出一些 ajax 请求或动画
function A() {
return $.ajax(....);
// or
// return $('#animate').animate({ width: 100 }, 1000 ).promise();
// or
// var def = $.Defered();
// in async function def.resolve();
// return def.promise();
}
function B() {
return $.ajax(....);
// or
// return $('#animate').animate({ width: 200 }, 3000 ).promise();
// var def = $.Defered();
// in async function def.resolve();
// return def.promise();
}
function C() {
return $.ajax(....);
// or
// return $('#animate').animate({ width: 300 }, 1000 ).promise();
// var def = $.Defered();
// in async function def.resolve();
// return def.promise();
}
$.when(A(), B(), C(), function (aRes, bRes, cRes) {
})
//C().then(B()).then(A()).done(function () {
// console.log('DONE');
//});
For a more detailed answer please explain what your functions do
如需更详细的答案，请解释您的功能是做什么的
