承诺然后解决得太快

Question

我试图用js学习promise，但我有点卡住了。我的目标是在显示加载器的过程中获取一个图像源(使用替换(，因为有些图像大小很大。我的问题是，它正确地传递了变量，但在创建src之前会运行"promise.then"。

下面是代码，我需要src值后面的加载器隐藏。我知道还有更多的方法可以实现这一点，但正如前所述，我在这里的目的是理解承诺。我也尝试添加一个setTimeout，但再次，承诺很快就解决了添加一个损坏的图像符号的问题

$(".owlsmaller").on("click", function(){
$(".loader").show();
const promise = new Promise((resolve, reject) => {
str = $(this).attr("src").replace(/-800x300/gi, '');
resolve(str);
});
promise
.then((str) => {
console.log(str);
$(".mainThumb").attr("src", str);
$(".mainThumb").attr("srcset", str);
})
.then( () => {
$(".loader").hide();
});
});

Answer 1

TLDR您的承诺是立即解决(*1(，因为没有异步代码在运行。你的方法应该有所不同。

更多解释

你对承诺的运作方式有误解。promise允许您等待异步代码的解析，但将同步代码放在promise的主体中并不能使该代码异步。

编辑： 根据@juan-mendez的评论，我将澄清：promise主体内的代码正常运行(同步(，并在调用promise构造函数后立即执行。事实上，Promise构造函数获取的函数参数名为executor，它会立即执行！。最终被延迟的是作为参数传递给then方法的任何函数的调用，或者then调用之后链接的任何函数

Promise构造函数用于运行一些异步函数(如get请求(，该函数通常为您提供回调，以便对该调用的结果进行操作。然后，您可以从回调中调用resolve。

您正在调用$和attr的jQuery函数是同步的，因此不需要promise。事实上，解析调用的放置甚至不在乎$或attr是异步的，因为它直接放在回调之后，而不是放在回调或类似的内部(当然，没有回调可用，因为没有异步性(。

*(1(在所有同步代码完成运行后立即执行

Answer 2

您的promise需要等待图像加载。您已经将replace((的返回值分配给图像的src了吗？

const promise = new Promise((resolve, reject) => {
$(this).on("load", resolve)
.on("error", reject)
.attr("src", (index, attr) => attr.replace(/-800x300/gi, ''));
});