将 ASP.net AJAX 计时器与 javascript 倒计时相结合答案

【问题标题】：Combine ASP.net AJAX timer with javascript countdown将 ASP.net AJAX 计时器与 javascript 倒计时相结合
【发布时间】：2012-10-16 20:12:16
【问题描述】：

我目前正在将一个 vb.net winforms 程序移植到一个基于 Web 的版本，并且原始程序中的一个功能已经被难住了。

在原始程序中，每 5 分钟会弹出一个表单供用户输入。主窗体上还有一个标签控件，可以倒计时到下一个弹出窗口。这是通过一个持续时间为 1 秒的定时器控制来实现的。每次滴答，它都会减少倒计时，当倒计时达到0时，它会弹出表单然后重置。很简单，但是在我的网络应用程序中，我无法承受每秒都进行回发，所以我正在尝试将 javascript 倒计时小部件与 AJAX 计时器结合起来。本质上，应该发生的是，当页面加载时，倒计时从 300 秒开始递减，而 AJAX 计时器从 300 秒的持续时间开始。我的想法是，当计时器滴答作响时，它将运行我的功能，并将倒计时再次重置为 300 秒。

我的问题是，我无法使用我拥有的代码重置倒计时，而且我知道我做错了什么（可能非常简单），但我不知道足够的 Java 知道什么。

如果我将 Timer var 硬编码为 300，则倒计时有效，并且计时器计时（触发附加功能），但倒计时只是继续倒计时（变为负数）。如何从后面的代码中重置倒计时变量？

这里是倒计时功能

    var Timer = <%= CountDown %>;

    function updateClock() {

        // Update Countdown
        Timer -= 1;
        var TimerMin = Math.floor(Timer / 60);
        var TimerSec = Timer - (TimerMin * 60);
        TimerSec = (TimerSec < 10 ? "0" : "") + TimerSec;
        var TimerFormat = TimerMin + ":" + TimerSec;

        // Update the countdown display
        document.getElementById("javaCountdown").firstChild.nodeValue = TimerFormat
    }

这是正文代码

<body onload="updateClock(); setInterval('updateClock()', 1000 )">

以及背后的代码

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Countdown = 300
End Sub

PProtected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles Timer1.Tick
    Countdown = 300
    'Additional Functions
End Sub

【问题讨论】：

如果我可以问，这个东西每 5 分钟出现一次的目的是什么？它需要什么用户输入，为什么每 5 分钟需要它一次？这似乎无关紧要，但这种来自网络应用程序的方法似乎很混乱，也许有更好的方法可以完全做到这一点。
这是一个麻醉监测程序。每 5 分钟弹出一次，提示用户输入患者的生命体征。 webapp 上的“弹出窗口”是一个模态弹出窗口。不过，这不是可以协商的。这就是程序的工作原理。
我为您设置了一个循环计时器示例，希望这对您有所帮助。 jsfiddle.net/yVUg8/2
那是一个更好的计时器，但它仍然没有解决与后面的代码交互的问题。是否可以从此调用后面的代码而不是调用警报框？
后面的代码无法重新绘制新表单，您需要使用 javascript 更新 DOM。一旦模式对话框被填写并且提交按钮（或者你想这样做）应该使用 ajax 来发布表单。

标签： javascript asp.net asp.net-ajax

【解决方案1】：

此解决方案使用 jQuery。

<script>

    var intervalSecond = null;
    var interval5minutes = null;

    $(document).ready(function() {

      // enable both intervals
      enableIntervals();

      // onsubmit event for your form
      $("#popupForm").submit(function() {

         // hide the form again
         $("#popupForm").css("display", "none");

         // enable intervals again.
         enableIntervals();
      });
    });

    function enableIntervals() {

      // every second interval
      intervalSecond = setInterval(function() {
        $("#updateMeEverySecond").html(new Date());
      }, 1000);

      // every 5 minutes interval
      interval5minutes = setInterval(function() {

        // display form and shut off the interval timers
        $("#popupForm").css("display", "block");
        clearInterval(intervalSecond);
        clearInterval(interval5minutes);
      }, 5 * 60 * 1000);
    }


</script>

<div id="popupForm" style="display:none;">
  <form>
    <input type="text" />
  </form>
</div>
<label id="updateMeEverySecond">Test</label>

【讨论】：