如果 DIV 值根据 ActionResult 值更改，则停止计时器

Question

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

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

使用下面的函数，我在 labelUploadingStartTime 标签上显示 START TIME。

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

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

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

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

如果 DIV 值根据 ActionResult 值更改，则停止计时器

Stop timer if DIV value changed based on ActionResult Value

javascript

jquery

.net-core

asp.net-mvc-5