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;
}
- 各属性说明如图
注意:到目前为止尚未发现统一的解决方案,FF、IE、chrome浏览器实现的滚动条的API各有不同,详情见参考文章。
参考文章:
滚动条自定义样式
jQuery的deferred对象详解
Promise
Javascript 中的神器——Promise
Promise解析源码