代码之家 › 专栏 › 技术社区 › Snappysites

返回条带平衡,同时使用JS和PHP避免加载时间

jquery html php javascript

Snappysites · 技术社区 · 3 年前

我正在使用Stripe API在其仪表板上返回给定客户的余额/信用,尽管API需要很长时间才能运行,页面加载时间也很长,只需要一个数字就很麻烦。我特别不想把余额保存到数据库中,所以我考虑了其他选择。

我已经编写了PHP API调用,将余额返回到我正在使用的新文件中 setInterval 函数,然后更新Div以显示平衡,这很好,尽管我根本不想重复这个函数,只是希望它加载并更新一次。我添加了一个预加载程序,理想情况下,我希望预加载程序在余额更新之前一直显示。显然我不能用 设置间隔 。我试过使用一些我知道的Javascript函数,比如window onload,但这根本不会更新余额?

我知道这个功能不是我需要的选项,尽管我对Javascript知之甚少,任何帮助或建议都将不胜感激。以下是我目前拥有的:

<script>
    setInterval(function() {
        $("#balance").load('stripebalance.php);
    }, 10000);
</script>

<div id="preloader">
    <div id="loader"></div>
</div>

<div id="balance">
<h1>Â£-</h1>
</div>

<script>
$(window).on('load', function(){
  setTimeout(removeLoader, 2000);
});
function removeLoader(){
    $("#preloader").fadeOut(500, function() {
      $("#preloader").remove(); 
  });  
}
</script>

1 回复 | 直到 3 年前

Phil 3 年前

在我看来,你只想在加载数据后删除预加载程序。

jQuery的 .load() 函数支持在请求完成后执行的回调函数

jQuery(function($) {
  $("#balance").load("stripebalance.php", function() {
    $("#preloader").fadeOut();
  });
});

在这个过程中不需要任何间隔或超时。

此外,现在快2023年了,你当然不需要jQuery

const getStripeBalance = async () => {
  const res = await fetch("stripebalance.php");
  if (!res.ok) {
    throw new Error(`Fetch error: ${res.status} - ${res.statusText}`);
  }
  return res.text();
}

const stripeBalanceHtmlPromise = getStripeBalance();

document.addEventListener("DOMContentLoaded", async () => {
  const balance = document.getElementById("balance");
  const loader = document.getElementById("preloader");
  const stripeBalanceHtml = await stripeBalanceHtmlPromise;
  balance.innerHTML = stripeBalanceHtml;

  loader.addEventListener("animationend", () => {
    loader.remove();
  });
  loader.classList.add("fadeOut");
});

.fadeOut {
  animation: fadeOut 0.5s linear forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前