Promise
在JavaScript的世界中，所有代碼都是單線程執(zhí)行的。由于這個“缺陷”，導致JavaScript的所有網(wǎng)絡操作，瀏覽器事件，都必須是異步執(zhí)行。但是有時候我們的一些代碼需要在這些異步執(zhí)行完之后再執(zhí)行，完成異步之下的同步執(zhí)行,于是就誕生了Promise對象。
簡單應用
// 0.5秒后返回input*input的計算結(jié)果:
function multiply(input) {
return new Promise(function (resolve, reject) {
log('calculating ' + input + ' x ' + input + '...');
setTimeout(resolve, 500, input * input);
});
}
// 0.5秒后返回input+input的計算結(jié)果:
function add(input) {
return new Promise(function (resolve, reject) {//注意這邊的返回值又是一個Promise對象，可以鏈式調(diào)用
log('calculating ' + input + ' + ' + input + '...');
setTimeout(resolve, 500, input + input);
});
}
var p = new Promise(function (resolve, reject) {//這邊的resolve和rejec是兩個標記，決定執(zhí)行then還是catch中的參數(shù)。
log('start new Promise...');
resolve(123);
});
p.then(multiply)//把multiply函數(shù)替代resolve執(zhí)行了，參數(shù)是resolve上的參數(shù)。
.then(add)
.then(multiply)
.then(add)
.then(function (result) {
log('Got value: ' + result);
});
Deferred
deferred對象就是jQuery的回調(diào)函數(shù)解決方案，也是Promise對象的加強版本，不過Promise是通過傳入的 函數(shù)中兩個參數(shù)resolve和reject來決定，執(zhí)行的是then中的函數(shù)還是catch中的函數(shù)。
而defered對象則是根據(jù)自己屬性的狀態(tài)，來判斷執(zhí)行done方法、fail方法、progress方法中的哪個方法，defered對象和Promise對象使用類似，只是defered更抽象，本質(zhì)只是一個標識執(zhí)行狀態(tài)的狀態(tài)機。
簡單應用
var wait = function(){
var dtd = $.Deferred(); //在函數(shù)內(nèi)部，新建一個Deferred對象
var tasks = function(){
alert("執(zhí)行完畢！");
dtd.resolve(); // 改變Deferred對象的執(zhí)行狀態(tài)
}; setTimeout(tasks,5000);
return dtd.promise(); // 返回promise對象
};
$.when(wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出錯啦！"); });
- 等待多個異步調(diào)用函數(shù)執(zhí)行完成之后再執(zhí)行
$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出錯啦！"); });
用CSS調(diào)整scrollbar(滾動條)的配色
- 如果僅要求IE瀏覽器，可以通過調(diào)整CSS的方式，來給滾動條換色。代碼如下
.uicss-cn
{
height:580px;overflow-y: scroll;
scrollbar-face-color:#EAEAEA;
scrollbar-shadow-color:#EAEAEA;
scrollbar-highlight-color:#EAEAEA;
scrollbar-3dlight-color:#EAEAEA;
scrollbar-darkshadow-color:#697074;
scrollbar-track-color:#F7F7F7;
scrollbar-arrow-color:#666666;
}
- 各屬性說明如圖
IE下CSS滾動條屬性說明圖.png
注意:到目前為止尚未發(fā)現(xiàn)統(tǒng)一的解決方案，F(xiàn)F、IE、chrome瀏覽器實現(xiàn)的滾動條的API各有不同，詳情見參考文章。
參考文章:
滾動條自定義樣式
jQuery的deferred對象詳解
Promise
Javascript 中的神器——Promise
Promise解析源碼
