在从外部 PHP 脚本加载其子 <div> 完成后显示 <div>

Question

我正在尝试在我的 PHP 页面中创建一个动态生成的图表。它工作正常，但我想控制显示，使包含图表的 div 仅在图表加载完成后显示。

HTML:

<div id="ViewsChartContainer">

   /* ... */            
      
   <div id="ViewsChart">
   </div>

</div>

JavaScript:

$("#MyButton").on('click', function(){
   // hide the div
   $("#ViewsChartContainer").hide();

   // loading from PHP
   $('#ViewsChart').load(
      'UserStats/DrawLineChart.php', 
      {
         'project_id_arr': JSON.stringify(totalSelectedPrjIdArr), 
         'start_date': startDate,
         'end_date': endDate
      }
   ).fadeIn("slow");

   // show the div
   $("#ViewsChartContainer").show();
});

'UserStats/DrawLineChart.php'只是生成一个canvas元素，如果你需要我可以提供代码。

我试过将 JS 代码放入异步函数中并调用 await，但它什么也没做。

$("#MyButton").on('click', async function(){
   $("#ViewsChartContainer").hide();

   await $('#ViewsChart').load(
      /* ... */
   ).fadeIn('slow');

   $("#ViewsChartContainer").show();
});

我无法使用 $(document).ready({})，因为它是在单击按钮时触发的。

唯一有效的是setTimeout

$("#MyButton").on('click', function(){
   $("#ViewsChartContainer").hide();

   $('#ViewsChart').load(
      /* ... */
   ).fadeIn("slow");

   setTimeout(() => {
      $("#ViewsChartContainer").show();
   }, 2000);
});

但这是硬编码的时间，所以我不禁想是否有更好的方法来做到这一点。请让我知道这是否也是实现此效果的唯一方法。

Answer 1

当您为 eventListener 设置 select 元素时，您有一个双引号，然后一个单引号：

   // This 
$("#MyButton").on('click', function(){
   // hide the div
   $("#ViewsChartContainer").hide();

   // loading from PHP
   $('#ViewsChart').load(
      'UserStats/DrawLineChart.php', 
      {
         'project_id_arr': JSON.stringify(totalSelectedPrjIdArr), 
         'start_date': startDate,
         'end_date': endDate
      }
   ).fadeIn("slow");

   // show the div
   $("#ViewsChartContainer").show();
});

Answer 2

.load() 自带回调。因此，您可以将代码更改为以下内容，它应该可以工作。

$("#MyButton").on('click', function(){
   $("#ViewsChartContainer").hide();

   $('#ViewsChart').load(
      /* ... */
   , () => {
       $("#ViewsChartContainer").show();
   }).fadeIn('slow');
});

见https://api.jquery.com/load/

我相信当您考虑使用 async 时，您假设它使用的是承诺。它不是，所以 async 不会有任何效果。在承诺成为现实之前，标准做法是使用回调（操作完成时触发的函数）。这是一篇提供更多信息的文章：here.

在从外部 PHP 脚本加载其子 <div> 完成后显示 <div>

Show the <div> after the loading of its child <div> from external PHP script is finished

javascript

jquery

asynchronous

loading

dynamic