js计数器不显示在php中答案

【问题标题】：js counter not displaying in phpjs计数器不显示在php中
【发布时间】：2013-02-27 20:32:32
【问题描述】：

我不明白为什么我没有看到 div 中显示的每个数字。

我的代码...

<head>
    <script>
        function countit(i)
        {
            document.getElementById('counter').innerHTML = i;
        }
    </script>
</head>
<body>

<div id="counter"></div>

<script>countit(1)</script>
<?php sleep(1); ?>
<script>countit(2)</script>
<?php sleep(1); ?>
<script>countit(3)</script>

</body>

我有一个 php 脚本，它处理数据库中的多条记录，我想显示一个计数器当前正在处理的记录。我认为JS是做到这一点的方法。我看到了与上面推荐的代码非常相似的东西。

任何见解将不胜感激。

【问题讨论】：

首先，您正在混合服务器端和客户端脚本。这让你感到困惑。

标签： php javascript counter

【解决方案1】：

PHP 会缓冲输出，并且在完成运行之前不会发送页面。在脚本元素的执行之间不运行睡眠。

改写你的逻辑以使用JavaScript setInterval。

或者，disable or avoid output buffering 在您的 PHP 脚本中，但请注意，这可能会影响浏览器缓存页面的能力。

【讨论】：

“睡眠”就在那里，所以我可以看到计数的变化。我想从我的 php 代码中的不同位置执行 js 函数，即：处理 x 条记录后，调用 js 函数并更新计数。我将研究禁用输出缓冲，看看会导致我的结果。
@user2076615：execute the js function from different places in my php code。它不是那样工作的。 PHP 在浏览器甚至可以看到 JavaScript 之前运行。

【解决方案2】：

PHP 是服务器端语言，而 Javascript 是客户端语言。我猜你只是在counter div 中看到3。原因是 PHP sleep(1) 甚至在页面渲染之前就发生了。您需要在 Javascript 中使用 setInterval 来完成您正在尝试做的事情。

【讨论】：

好的。也许我对此采取了错误的方法。如果我有一个 php 脚本正在处理一个大表并且需要相当长的时间（实际上是几分钟），我如何在页面上显示一个计数器让用户知道他们在这个过程中的位置？
AJAX 是您需要使用的。
这听起来像我需要的。去研究。非常感谢。

【解决方案3】：

问题是您的 php 代码在您的服务器上执行，而您需要在客户端 (JavaScript) 上执行代码才能使其工作：

<script>
  var idx = 1;
  var doCount= function(){
      if(idx >= 3) return;
      countit(idx);
      setTimeout(doCount,1000);         
  };
  doCount();


</script>

删除以下内容：

<?php sleep(1); ?>
<script>countit(2)</script>
<?php sleep(1); ?>
<script>countit(3)</script>

【讨论】：

【解决方案4】：

您的代码等待 2 秒，浏览器收到：

<head>
    <script>
        function countit(i)
        {
            document.getElementById('counter').innerHTML = i;
        }
    </script>
</head>
<body>

<div id="counter"></div>

<script>countit(1)</script>

<script>countit(2)</script>

<script>countit(3)</script>

</body>

这可能不是你想要的。让我们试试这样的：

<script>
    var i = 1;
    function counter()
    {
       if (i < 4)
       {
         countit(i);
         i++;
         window.setTimeout(counter,1000);
       }
    }

    counter();
</script>

【讨论】：