javascript (ASP.Net) 中的计时器倒计时

Question

我使用下面的代码使计时器倒计时，控制台日志运行良好 (10,9,8,...) 但我看不到标签上的变化

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>
        function sleep(miliseconds) {
            var currentTime = new Date().getTime();
            while (currentTime + miliseconds >= new Date().getTime()) {
            }
        }

        function counterDown(count) {
            console.log("JLog: ", count);
            if (count > 1) {
                var lbl = document.getElementById('<%= lblTimer.ClientID %>');
                lbl.innerText = count;

                sleep(1000);
                counterDown(count - 1);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <br /><br />
        <asp:TextBox ID="txtUserName" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
        <asp:TextBox ID="txtPassword" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
        <asp:Button runat="server" OnClientClick="counterDown(10);" Text="Start Timer" />
        <br /><br />
        <asp:Label runat="server" id="lblTimer" Text="--"></asp:Label><br /><br />    
    </form>
</body>
</html>

编辑

我也使用下面的代码作为答案中提到的，但不起作用。甚至控制台日志也不起作用

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button runat="server" OnClientClick="start(10);return false;" Text="Start Timer" />
        <br /><br />
        <asp:Label runat="server" id="lblTimer" Text="--" ClientIDMode="Static"></asp:Label><br /><br />
         <script>
             var mycount = 0
             var myTimer
             function start(count) {
                 mycount = count
                 $('#lblTimer').text(count)
                 myTimer = setInterval(MyTick, 1000)
             }

             function MyTick() {
                 mycount = mycount - 1
                 $('#lblTimer').text(mycount)
                 if (mycount <= 0) {
                     clearInterval(myTimer)
                 }
                 console.log("JLog: ", mycount);
             }
         </script>
    </form>
</body>
</html>

我该如何解决这个问题！？

Answer 1

好的，这里的问题是如果你查看（使用）f12 调试工具，你确实会在日志中看到倒计时。然而，（令人难过的是网络上有无数的例子），他们没有提到网络屏幕更新和显示在例程退出之前不会更新。当 js 例程完成后，屏幕会更新以开始工作。换句话说，当标签被更新时，它不会更新浏览器中的显示，直到例程完成。并且在 js 代码中没有可用的“执行事件”或命令来表示请更新（显示）浏览器的未决更新。

因此，您需要编写一个更新标签的例程，然后完成！！！

所以，你需要这样做：

    <asp:Button runat="server" OnClientClick="start(10);return false;" Text="Start Timer" />
    <br /><br />
    <asp:Label runat="server" id="lblTimer" Text="--" ClientIDMode="Static"></asp:Label><br /><br />    

    <script>
        var mycount = 0
        var myTimer
        function start(count) {
            mycount = count
            $('#lblTimer').text(count)
            myTimer = setInterval(MyTick, 1000)
        }

        function MyTick() {
            mycount = mycount - 1
            $('#lblTimer').text(mycount)
            if (mycount <= 0) {
                clearInterval(myTimer)
            }
        }
    </script>

另请注意，这实际上使代码异步。这意味着例程 start(10) 不会等待，因此您不会例如“推迟”或为该按钮制作服务器端代码运行（如果有的话）。

如果需要等待 10 秒，然后服务器端代码为运行，那么我们必须添加到上面的代码才能使其工作。由于 start() 例程现在不等待，该按钮的任何服务器端代码事件也不会等待（单击按钮时它将运行。）。如前所述，询问您是否有该按钮的代码，并且您需要（想要）您附加到该按钮的服务器端事件代码等待 10 秒，然后单击按钮（服务器端后面的代码）是运行.

示例 2：注意如上所述 - 浏览器 js 代码在代码（调用的例程）退出并完成之前不会更新控件！因此，我们必须使用 settimer - 这会使例程退出，并且每 1 秒被调用一次。 js 代码因此变得异步，并且允许更新控件。

所以，试试这个：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

     <script>
            var mycount = 0
            var myTimer
            function start(count) {
                mycount = count
                var myLable = document.getElementById('<%= lblTimer.ClientID %>');
                myLable.innerText = mycount
                myTimer = setInterval(MyTick, 1000)
            }

            function MyTick() {
                mycount = mycount - 1
                var myLable = document.getElementById('<%= lblTimer.ClientID %>');
                myLable.innerText = mycount

                if (mycount <= 0) {
                    clearInterval(myTimer)
                }
            }
     </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>

 <asp:TextBox ID="txtUserName" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
        <asp:TextBox ID="txtPassword" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
        <asp:Button runat="server" OnClientClick="start(10);return false;" Text="Start Timer" />
        <br /><br />
        <asp:Label runat="server" id="lblTimer" Text="--"></asp:Label><br /><br />   

        </div>
    </form>
</body>
</html>

javascript (ASP.Net) 中的计时器倒计时

Timer counter down in javascript (ASP.Net)

javascript

asp.net

webforms

示例 2：注意如上所述 - 浏览器 js 代码在代码（调用的例程）退出并完成之前不会更新控件！因此，我们必须使用 settimer - 这会使例程退出，并且每 1 秒被调用一次。 js 代码因此变得异步，并且允许更新控件。