如果 DIV 值根据 ActionResult 值发生变化，则停止计时器

Question

我将文件上传到文件夹中，并将其详细信息保存到数据库中。在执行此任务时，我正在启动计时器，插入数据后我有兴趣停止计时器。

<div id="labelUploadingStartTime" name="labelUploadingStartTime"></div>
<div id="labelUploadingEndTime" name="labelUploadingEndTime"></div>

使用以下函数，我在 labelUploadingStartTime 标签上显示开始时间。

function startUpdatingUploading_StartTimeIndicator() {       
        intervalIdUploadingStartTime = setInterval(
            function () {                
                $.post(
                    "/MyUpload/GetStartTime",
                    function (progress) {                        
                        $("#labelUploadingStartTime").html(progress);
                    }
                );
            },
            10
        );
    }

同时当在labelUploadingEndTime中设置labelUploadingStartTime值时，我使用以下函数显示倒计时详细信息。

function startUpdatingUploadingEndTimeIndicator() {
       $.post(  
            "/MyUpload/GetStartTime",
            function (progress) {                
                if (progress != null) {
                    intervalIdUploadingEndTime = setInterval(function () {
                        var currentTime = new Date();
                        var hours = currentTime.getHours();
                        var minutes = currentTime.getMinutes();
                        var seconds = currentTime.getSeconds();

                        // Add leading zeros
                        hours = (hours < 10 ? "0" : "") + hours;
                        minutes = (minutes < 10 ? "0" : "") + minutes;
                        seconds = (seconds < 10 ? "0" : "") + seconds;

                        // Compose the string for display
                        var currentTimeString = hours + ":" + minutes + ":" + seconds;
                        $("#labelUploadingEndTime").html(currentTimeString);
                    }, 1000);
                }
            }
        );
    }

现在我的兴趣是，当数据插入数据库时​​，我想停止计时器，并且在 labelUploadingEndTime 中我想显示结束时间。

例如，

labelUploadingStartTime --> 12:10:10

labelUploadingEndTime --> 12:12:30

我怎样才能停止计时器？

Answer 1

要回答您的问题，您可以使用 clearInterval() JS 函数停止计时器。您传入要停止的计时器 ID，例如：

clearInterval(intervalIdUploadingEndTime);

但是，我认为您根本不需要计时器。您可以使用 $.post 的 success 函数将完成时间添加到其他标签。

function doUpload() {
  var startTime = new Date();
  $("#labelUploadingStartTime").html(startTime.toLocaleString());

  $.post(
    "/MyUpload/PostFiles",
    function () {                        
      var endTime = new Date();
      $("#labelUploadingEndTime").html(endTime.toLocaleString());
    }
  );
}

您的后端不需要返回文件上传的开始和结束时间，您在客户端拥有该信息