如何检查stripe.js是否已完成执行？
试着提高我在灯塔的成绩和网站的一般表现。关于包括提到stripe.js的官方文档(强调我的)：
为了更好地利用Stripe的高级欺诈功能，在每个页面上都包含了这个脚本，而不仅仅是结账页面。这允许Stripe发现可疑行为，这可能是欺诈的迹象，因为客户浏览您的网站。
这是可以理解的，但这意味着，如果没有async/defer，脚本会在大多数几乎没有使用它的页面上稍微降低页面的速度(在我的测试中大约是190 ms )。
和：
您还可以使用脚本标记上的Stripe.js或
defer属性加载async。但是，请注意，具有异步加载任何API调用的只能在脚本执行完成之后进行。
这就给我留下了以下问题：
- 如何检查stripe.js是否已完成执行？
defer？也就是说，stripe.js是完全独立的(异步)，还是依赖于完全构建的DOM (延迟)？- 与其检查stripe.js是否已完成执行，不如将我自己的内联Stripe代码(用于结帐页面)移到它自己的专用JS文件中，作为延迟加载。这样，事情就会以一种非阻塞的方式加载，并且仍然按照它们的相对顺序执行。
回答 3
Stack Overflow用户
发布于 2022-04-30 13:14:00
如果使用npm模块不是异步加载的情况，则可以在初始化Stripe.js之前检查Stripe函数。就像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script defer src="https://js.stripe.com/v3/"></script>
</head>
<body>
<script type="text/javascript">
try {
console.log("The first attempt to access Stripe: " + Stripe.version);
} catch (e) {
console.log("Stripe is not ready.");
}
stripeScriptElement = document.querySelector("script[src^='https://js.stripe.com/v3']");
if (stripeScriptElement) {
stripeScriptElement.addEventListener("load", () => {
if (Stripe) {
console.log("Stripe v." + Stripe.version + " is ready. ");
} else {
console.error("Failed loading Stripe.js");
}
});
}
</script>
</body>
</html>
Stack Overflow用户
发布于 2022-04-30 16:36:33
在React环境中，我初始化如下：
import { loadStripe } from "@stripe/stripe-js";
export let stripe = null;
export let stripe_started = false;
export let stripe_running = false;
(async () => {
try {
stripe = await loadStripe("pk_test_****");
stripe_running = true;
} catch (err) {
stripe_running = false;
} finally {
stripe_started = true;
}
})();任何导入这个模块的模块都可以访问这些标志；闭包允许函数在顶层运行异步。
Stack Overflow用户
发布于 2022-05-02 08:45:07
如何检查stripe.js是否已完成执行？
将loadStripe()检查为另一个答案。
异步还是延迟？也就是说，stripe.js是完全独立的(异步)，还是依赖于完全构建的DOM (延迟)？
推迟，因为有时stripe.js和您自己的js会查找要挂载的元素到DOM，并且在加载完整DOM之后运行将更安全
与其检查stripe.js是否已完成执行，不如将我自己的内联Stripe代码(用于结帐页面)移到它自己的专用JS文件中，作为延迟加载。这样，事情就会以一种非阻塞的方式加载，并且仍然按照它们的相对顺序执行。
确保将stripe.js和您自己的专用JS标记为“延迟”，并将stripe.js放在JS之前。当有多个延迟脚本时，它们的执行顺序将由包含命令决定。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer
https://stackoverflow.com/questions/72066366
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号