这个小提琴是关于jquery延迟对象的。执行顺序为1,4,2,3。它按预期使用jquery v1.x和v2.x但不是v3.x。我错过了什么？
正确的顺序是1,4,2,3,all done，但v3 1,2,4,all done,3 when/all done 3触发v3.x之前1,4,2,3触发div {
width: 0px;
height: 20px;
}
.div1 {
background-color: red;
}
.div2 {
background-color: yellow;
}
.div3 {
background-color: lightblue;
}
.div4 {
background-color: gray;
}
只需更改jQuery版本，您就会看到var defer = $.Deferred();
var div1 = defer.then(function(value) {
return $(".div1").animate({
width: "100%"
}, 1000);
});
var div2 = div1.then(function(value) {
$("#status").append("<p>div1 done</p>");
return $(".div2").animate({
width: "100%"
}, 3000);
});
var div3 = div2.then(function(value) {
$("#status").append("<p>div2 done</p>");
return $(".div3").animate({
width: "100%"
}, 2000, function () {$("#status").append("<p>div3 done</p>");});
});
var div4 = function() {
return $.Deferred(function(dfd) {
$(".div4").animate({
width: "100%"
}, 1500, dfd.resolve);
}).promise().done(function () {$("#status").append("<p>div4 done</p>");});
}
$.when(div1, div2, div3, div4()).then(function() {
$("#status").append("<p>all done</p>");
});
defer.resolve();
它在<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<span id="status"></span>
订单中无效。
拨弄
https://jsfiddle.net/ergec/mrd2dt3a/
这些是代码。
CSS
for(int m = result.size()-1; m > -1; m--)
{
System.out.print(result.get(m) + " -> ");
}
的javascript
Path of word ladder: abase -> abash ->
HTML
Path of wordladder: abase -> abash
答案 0 :(得分：3)
jQuery 3.0 “修复” jquery延迟系统，以便它更接近Promises / A +规范。 https://jquery.com/upgrade-guide/3.0/#deferred < / p>＆＃xA;＆＃xA;
这意味着现在你的.then回调必须返回一个值，一个值或一个被拒绝的承诺。 jQuery对象不可用，这就是为什么你的代码在升级到3.1时开始以不同的方式工作的原因。
＆＃xA;＆＃xA;如果修改.then（）回调为1 2和3通过在末尾添加.promise（）来正确返回一个thenable，它将返回到预期的工作状态（这也适用于旧版本。）
＆＃xA;＆＃xA;
/ *＆＃xD;＆＃xA; JQuery Deferred Objects＆＃xD;＆＃xA; * /＆＃xD;＆＃xA; var defer = $ .Deferred（）;＆＃xD;＆＃xA; var div1 = defer.then（function（value）{＆＃xD;＆＃xA; return $（ “.div1”）。animate（{＆＃xD;＆＃xA; width：“100％”＆＃xD;＆＃xA;}，1000）.promise（）;＆＃xD;＆＃xA;}） ;＆＃xD;＆＃xA; var div2 = div1.then（function（value）{＆＃xD;＆＃xA; $（“＃status”）。append（“＆lt; p＆gt; div1 done＆lt; / p＆gt; “）;＆＃xD;＆＃xA;返回$（”。div2“）。animate（{＆＃xD;＆＃xA; width：”100％“＆＃xD;＆＃xA;}，3000）。诺言（） ;＆＃xD;＆＃xA;}）;＆＃xD;＆＃xA; var div3 = div2.then（function（value）{＆＃xD;＆＃xA; $（“＃status”）。append（“＆lt; p＆gt; div2 done＆lt; / p＆gt;”）;＆＃xD;＆＃xA; return $（“。div3”）。animate（{＆＃xD;＆＃xA; width：“100％”＆＃xD;＆＃xA;}，2000，function（）{$（“＃status”）。 append（“＆lt; p＆gt; div3 done＆lt; / p＆gt;”）;}）。promise（）;＆＃xD;＆＃xA;}）;＆＃xD;＆＃xA; var div4 = function（）{＆ #xD;＆＃XA; return $ .Deferred（function（dfd）{＆＃xD;＆＃xA; $（“。div4”）。animate（{＆＃xD;＆＃xA; width：“100％”＆＃xD;＆＃xA ;}，1500，dfd.resolve）;＆＃xD;＆＃xA;}）。promise（）。done（function（）{$（“＃status”）。append（“＆lt; p＆gt; div4 done＆lt; / p＆gt;“）;}）;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; $。when（div1，div2，div3，div4（））。then（function（）{＆＃xD; ＆＃xA; $（“＃status”）。append（“＆lt; p＆gt; all done＆lt; / p＆gt;”）;＆＃xD;＆＃xA;}）;＆＃xD;＆＃xA; defer.resolve （）; ＆＃xD;＆＃xA; div {＆＃xD;＆＃xA; width：0px;＆＃xD;＆＃xA;身高：20px;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .div1 {＆＃xD;＆＃xA; background-color：red;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .div2 {＆＃xD;＆＃xA; background-color：yellow;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .div3 {＆＃xD;＆＃xA; background-color：lightblue;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .div4 {＆＃xD;＆＃xA; background-color：grey;＆＃xD;＆＃xA;} ＆＃xD;＆＃xA; < code>＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”＆gt;＆lt; / script＆gt;＆＃xD;＆＃xA;＆lt; ; div class =“div1”＆gt; div1＆lt; / div＆gt;＆＃xD;＆＃xA;＆lt; div class =“div2”＆gt; div2＆lt; / div＆gt;＆＃xD;＆＃xA;＆lt; div class = “div3”＆gt; div3＆lt; / div＆gt;＆＃xD;＆＃xA;＆lt; div class =“div4”＆gt; div4＆lt; / div＆gt;＆＃xD;＆＃xA;＆lt; span id =“status”＆gt ;＆LT; /跨度＆GT;＆＃的xD;＆＃XA;