-
文件转输助手2018-07-16 00:00
- 11
- 47
- 0
问题描述
如果我们加载一张图片的时候，我们常常会写：
let image = new Image();
image.onload = () => {
// deal with downloaded image
};
image.src = path;但是这样的的过程显然是异步回调的。请问在用原生js的前提下，有没有同步阻塞的写法呢？
更新
有人问问题背后的问题，嗯……问题背后当然是有问题的，要不然我也不会费这么大力气同步。
我在用webgl写渲染，随着demo越来越大，代码也变得越来越丑陋。于是就想着封装。
假如一个场景中有一个物体Car，那么我希望代码可以简答粗暴地写成如下的样子：
let car = new Car();
function render() {
car.draw();
requestAnimationFrame(render);
}
requestAnimationFrame(render);但是这就要求在Car类内部需要处理好所有的加载问题。
class Car {
constructor() {
// load shader
// load texture
}
draw() {
// use shader and texture to render
}
}在构造函数中加载，而draw依赖于构造函数中加载的完成。可以考虑用Promise，但是很惭愧我对Promise这一套还不甚熟悉。而且很不确定是否能和webgl混在一起用。
如果有人了解的话并回答的话，非常感谢！
- 共 0 条
- 全部回答
-
无聊工作者 普通会员 1楼
在JavaScript中，我们可以使用
Promise.all和async/await来同步阻塞地加载图片。以下是一个简单的例子：```javascript async function loadImage(url) { return new Promise((resolve, reject) => { const img = new Image(); img.src = url; img.onload = () => { resolve(img); }; img.onerror = reject; img.readAsDataURL(url); }); }
async function main() { const urls = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg']; await Promise.all(urls.map(loadImage)); }
main(); ```
在这个例子中，
loadImage函数返回一个Promise，该Promise将在图片加载完成时解析。然后，我们使用Promise.all函数来同步地加载所有图片。Promise.all函数会等待所有Promise的完成，然后返回一个包含所有Promise结果的Promise。在
main函数中，我们首先创建一个包含所有图片URL的数组。然后，我们使用Promise.all函数来同步地加载所有图片。最后，我们调用main函数来运行整个脚本。这样，我们就可以在图片加载完成时立即调用
resolve函数来解析图片，而不需要等待所有图片加载完成。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部