Promise
在JavaScript的世界中，所有代碼都是單線程執(zhí)行的涕癣。由于這個(gè)“缺陷”哗蜈，導(dǎo)致JavaScript的所有網(wǎng)絡(luò)操作，瀏覽器事件，都必須是異步執(zhí)行祥款。但是有時(shí)候我們的一些代碼需要在這些異步執(zhí)行完之后再執(zhí)行蜓氨，完成異步之下的同步執(zhí)行,于是就誕生了Promise對(duì)象。
簡(jiǎn)單應(yīng)用
// 0.5秒后返回input*input的計(jì)算結(jié)果:
function multiply(input) {
return new Promise(function (resolve, reject) {
log('calculating ' + input + ' x ' + input + '...');
setTimeout(resolve, 500, input * input);
});
}
// 0.5秒后返回input+input的計(jì)算結(jié)果:
function add(input) {
return new Promise(function (resolve, reject) {//注意這邊的返回值又是一個(gè)Promise對(duì)象音比，可以鏈?zhǔn)秸{(diào)用
log('calculating ' + input + ' + ' + input + '...');
setTimeout(resolve, 500, input + input);
});
}
var p = new Promise(function (resolve, reject) {//這邊的resolve和rejec是兩個(gè)標(biāo)記，決定執(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對(duì)象就是jQuery的回調(diào)函數(shù)解決方案，也是Promise對(duì)象的加強(qiáng)版本骚亿，不過Promise是通過傳入的 函數(shù)中兩個(gè)參數(shù)resolve和reject來決定已亥，執(zhí)行的是then中的函數(shù)還是catch中的函數(shù)。
而defered對(duì)象則是根據(jù)自己屬性的狀態(tài)来屠，來判斷執(zhí)行done方法陷猫、fail方法、progress方法中的哪個(gè)方法的妖，defered對(duì)象和Promise對(duì)象使用類似绣檬，只是defered更抽象，本質(zhì)只是一個(gè)標(biāo)識(shí)執(zhí)行狀態(tài)的狀態(tài)機(jī)嫂粟。
簡(jiǎn)單應(yīng)用
var wait = function(){
var dtd = $.Deferred(); //在函數(shù)內(nèi)部娇未，新建一個(gè)Deferred對(duì)象
var tasks = function(){
alert("執(zhí)行完畢！");
dtd.resolve(); // 改變Deferred對(duì)象的執(zhí)行狀態(tài)
}; setTimeout(tasks,5000);
return dtd.promise(); // 返回promise對(duì)象
};
$.when(wait())
.done(function(){ alert("哈哈星虹，成功了零抬！"); })
.fail(function(){ alert("出錯(cuò)啦！"); });
- 等待多個(gè)異步調(diào)用函數(shù)執(zhí)行完成之后再執(zhí)行
$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){ alert("哈哈宽涌，成功了平夜！"); })
.fail(function(){ alert("出錯(cuò)啦！"); });
用CSS調(diào)整scrollbar(滾動(dòng)條)的配色
- 如果僅要求IE瀏覽器卸亮，可以通過調(diào)整CSS的方式忽妒，來給滾動(dòng)條換色。代碼如下
.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;
}
- 各屬性說明如圖
注意:到目前為止尚未發(fā)現(xiàn)統(tǒng)一的解決方案兼贸，F(xiàn)F段直、IE、chrome瀏覽器實(shí)現(xiàn)的滾動(dòng)條的API各有不同溶诞，詳情見參考文章鸯檬。
參考文章:
滾動(dòng)條自定義樣式
jQuery的deferred對(duì)象詳解
Promise
Javascript 中的神器——Promise
Promise解析源碼
