jQuery推遲使用jQuery v1.x和v2.x，但不使用v3.x

這個小提琴是關於jQuery延期對象。執行順序是1,4,2,3。它按預期工作，jquery v1.x和，但不是v3.x。我錯過了什麼？jQuery推遲使用jQuery v1.x和v2.x，但不使用v3.x

正確的順序是1,4,2,3,all done但在v3它1,2,4,all done,3這3之前沒有任何意義when/all done觸發

只是簡單地改變jQuery的版本，你會看到，隨着v3.x它不會在1,4,2,3秩序工作。

撥弄

並且這些代碼。

CSS

div { 
    width: 0px; 
    height: 20px; 
} 

.div1 { 
    background-color: red; 
} 

.div2 { 
    background-color: yellow; 
} 

.div3 { 
    background-color: lightblue; 
} 

.div4 { 
    background-color: gray; 
}

的javascript

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();

HTML

<div class="div1">div1</div> 
<div class="div2">div2</div> 
<div class="div3">div3</div> 
<div class="div4">div4</div> 
<span id="status"></span>

來源

2016-11-11 Ergec

它工作正常。您可能包含3.x的錯誤版本（超薄版本沒有所有方法） –

@KevinB順序不同，它必須是「1,4,2,3，全部完成」。但在'v3'中它是'1,2,4，全部完成，3'，在'3'之前觸發時'沒有任何意義'。在所有完成之後必須在最後完成 – Ergec

通過代碼遍歷，您得到的順序是有道理的。 –

jQuery的3.0 「固定」 jquery推遲系統，以便它更貼近Promises/A +規範。 https://jquery.com/upgrade-guide/3.0/#deferred

這意味着現在你的.then回調必須返回一個可接受的值，或一個被拒絕的承諾。 jQuery對象不可用，這就是爲什麼當你升級到3.1時你的代碼開始工作不同。

如果您修改了1 2和3的.then（）回調以通過將.promise（）添加到最終來正確地返回一個可選屬性，它將回到按預期工作（這也適用於舊版本）。

/* 
 
JQuery Deferred Objects 
 
*/ 
 
var defer = $.Deferred(); 
 
var div1 = defer.then(function(value) { 
 
    return $(".div1").animate({ 
 
     width: "100%" 
 
    }, 1000).promise(); 
 
}); 
 
var div2 = div1.then(function(value) { 
 
    $("#status").append("<p>div1 done</p>"); 
 
    return $(".div2").animate({ 
 
     width: "100%" 
 
    }, 3000).promise(); 
 
}); 
 
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>");}).promise(); 
 
}); 
 
var div4 = function() { 
 
    return $.Deferred(function(dfd) { 
 
     $(".div4").animate({ 
 
\t \t width: "100%" 
 
\t \t }, 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 { 
 
    width: 0px; 
 
    height: 20px; 
 
} 
 

 
.div1 { 
 
    background-color: red; 
 
} 
 

 
.div2 { 
 
    background-color: yellow; 
 
} 
 

 
.div3 { 
 
    background-color: lightblue; 
 
} 
 

 
.div4 { 
 
    background-color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="div1">div1</div> 
 
<div class="div2">div2</div> 
 
<div class="div3">div3</div> 
 
<div class="div4">div4</div> 
 
<span id="status"></span>

來源

2016-11-11 17:00:10

jQuery推遲使用jQuery v1.x和v2.x，但不使用v3.x

回答

相關問題