关于Promise、Deferred和自定义滚动条样式的入门

Promise

• 在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。但是有时候我们的一些代码需要在这些异步执行完之后再执行，完成异步之下的同步执行,于是就诞生了Promise对象。

• 简单应用

// 0.5秒后返回input*input的计算结果:
function multiply(input) {
    return new Promise(function (resolve, reject) {
        log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500, input * input);
    });
}
// 0.5秒后返回input+input的计算结果:
function add(input) {
    return new Promise(function (resolve, reject) {//注意这边的返回值又是一个Promise对象，可以链式调用
        log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500, input + input);
    });
}
var p = new Promise(function (resolve, reject) {//这边的resolve和rejec是两个标记，决定执行then还是catch中的参数。
    log('start new Promise...');
    resolve(123);
});
p.then(multiply)//把multiply函数替代resolve执行了，参数是resolve上的参数。
 .then(add)
 .then(multiply)
 .then(add)
 .then(function (result) {
    log('Got value: ' + result);
});

Deferred

• deferred对象就是jQuery的回调函数解决方案，也是Promise对象的加强版本，不过Promise是通过传入的 函数中两个参数resolve和reject来决定，执行的是then中的函数还是catch中的函数。

• 而defered对象则是根据自己属性的状态，来判断执行done方法、fail方法、progress方法中的哪个方法，defered对象和Promise对象使用类似，只是defered更抽象，本质只是一个标识执行状态的状态机。

• 简单应用

　　var wait = function(){
　　　　var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
　　　　var tasks = function(){
　　　　　　alert("执行完毕！");
　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态
　　　　};　　　　setTimeout(tasks,5000);
　　　　return dtd.promise(); // 返回promise对象
　　};
　　$.when(wait())
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

• 等待多个异步调用函数执行完成之后再执行

　　$.when($.ajax("test1.html"), $.ajax("test2.html"))
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

用CSS调整scrollbar(滚动条)的配色

• 如果仅要求IE浏览器，可以通过调整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

注意:到目前为止尚未发现统一的解决方案，FF、IE、chrome浏览器实现的滚动条的API各有不同，详情见参考文章。

参考文章:
滚动条自定义样式
jQuery的deferred对象详解
Promise
Javascript 中的神器——Promise
Promise解析源码