Stop timer if DIV value changed based on ActionResult Value-CodePudding

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?

CodePudding user response：

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