javascript - Promise的用法问题
本文介绍了javascript - Promise的用法问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
问题
现在想用Promise让所有图片加载完之后执行其他逻辑
看了很多资料会简单使用Promise了,但是在循环里就蒙了。。
Promise.all()的参数该怎么弄呢?
$.each(data, function (i, n) {
//insert Name
wall.insert(n.id, n.nickname, 'name');
//Photo and Avatar load
wall.loadImg(n.photo, function () {
wall.loadImg(n.avatar, function () {
wall.insert(n.id, n.avatar, 'avatar');
wall.insert(n.id, n.photo, 'photo');
wallData.showKey.push(n.id);
});
});
});
wall.loadImg = function (url, cb, er) {
new Promise((resolve, reject) => {
var img = new Image();
img.src = url;
if(img.complete){
cb()
resolve()
}else {
img.onload = function(){ resolve() };
img.onerror = er;
}
});
};
解决方案
从你的代码里,没看出来哪里是Promise
,你应该贴出和Promise
相关的代码。至于怎么resolve
多个Promise
,我想@nealnote 说的很清楚了
你的用法仍然是callback
,不是Promise
风格,我稍微改了下:
var promises = $.map(data, function(i, n) {
//insert Name
wall.insert(n.id, n.nickname, 'name');
//Photo and Avatar load
return wall.loadImg(n.photo)
.then(function() {
return wall.loadImg(n.avatar);
})
.then(function() {
wall.insert(n.id, n.avatar, 'avatar');
wall.insert(n.id, n.photo, 'photo');
wallData.showKey.push(n.id);
});
});
wall.loadImg = function(url) {
return new Promise((resolve, reject) => {
var img = new Image();
img.src = url;
if (img.complete) {
return resolve();
}
img.onload = resolve;
img.onerror = reject;
});
};
Promise.all(promises)
.then(function() {
console.log('all have been done!!!!');
});
这篇关于javascript - Promise的用法问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文