Stop timer if DIV value changed based on ActionResult Value

Question

I am uploading files into the folder as well as saving their details into DB. While performing this task I am starting my timer And after inserting data I am interested to STOP the timer.

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

Using the below function I am displaying the START TIME on my labelUploadingStartTime label.

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

At the same time when the labelUploadingStartTime value is set in labelUploadingEndTime I am display the countdown details using below function.

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

Now my interest is when data is inserted into the database I want to STOP THE TIMER and in labelUploadingEndTime I want to display the ending time.

For example,

labelUploadingStartTime -- > 12:10:10

labelUploadingEndTime -- > 12:12:30

How CAN I STOP THE TIMER?

Answer 1

To answer your question, you can stop the timer with the clearInterval() JS function. You pass in the timer ID that you want to stop, eg:

clearInterval(intervalIdUploadingEndTime);

However, I don't think you need a timer at all for this. You can use the success function of $.post to add the finish time to the other label.

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

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

Your backend doesn't need to return the start and end times of the file upload, you have that information on the client side