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

如何解决从外部 PHP 脚本加载其子 <div> 完成后显示 <div>

我正在尝试在我的 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' 只是生成一个画布元素，如果你需要我可以提供代码。

1. 我尝试将 JS 代码放入异步函数并调用 await，但它没有做任何事情。

   $("#MyButton").on('click',async function(){
      $("#ViewsChartContainer").hide();
   
      await $('#ViewsChart').load(
         /* ... */
      ).fadeIn('slow');
   
      $("#ViewsChartContainer").show();
   });
   

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

3. 唯一有效的是 setTimeout

   $("#MyButton").on('click',function(){
      $("#ViewsChartContainer").hide();
   
      $('#ViewsChart').load(
         /* ... */
      ).fadeIn("slow");
   
      setTimeout(() => {
         $("#ViewsChartContainer").show();
      },2000);
   });
   

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

解决方法

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

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

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

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

我相信当您考虑使用 async 时，您是在假设它使用的是 promise。不是，所以 async 将不起作用。在承诺成为事物之前，标准做法是使用回调（操作完成时触发的函数）。这是一篇提供更多信息的文章：here。

,

当您为 eventListener 选择元素时，您有一个双引号，然后是一个单引号：

   // 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();
});