javascript/jquery clearInterval 有效但有延迟

Question

I have a flask-environment running server-sided, which calculates the distance between it's current position (GPS-Module attached to the server) and given coordinates. I want a text to update when a certain event occurs. It should keep updating until a different event occurs.

This is my function to update the distance:

function getDistToCurPos(lat, lon) {
        $.getJSON('/getDistFromCurPosToPoint', {
        pLat: lat, 
        pLon: lon,
      },
      function(data){
        dist = data;
        let distStr = String(dist);
        let outStr = '<div class="distanceOutput"> Distance: '.concat(distStr).concat("</div>");
        $( "div.distanceOutput" ).replaceWith( outStr );
        });
};

When the start-event occurs, I call the function as follows (with example-values 38 and 9):

distRefreshID = setInterval(function() { getDistToCurPos(38,9); }, distUpdateTime);

distUpdateTime is set to 500. The server response takes 15 ms in average.

Initial state of the text:

<div class="distanceOutput">Inactive !</div>

To terminate updating the text, I call the following, when a different event occurs:

if ( distRefreshID !== 0) {
   clearInterval(distRefreshID);
   $( "div.distanceOutput" ).replaceWith('<div class="distanceOutput">Inactive again!</div>');
   distRefreshID = 0;
}

The code works in general. But when the stop-event occurs, I see "Inactive again." only for a short moment, After that. the text keeps getting updated with the current values for a few seconds.

Any tips, where my bug is?

Answer 1

setInterval does not initially call the function, it calls it after x milliseconds have passed so if you want to instantly update the content call the function right before setting the interval

getDistToCurPos(38,9);
distRefreshID = setInterval(function() { getDistToCurPos(38,9); }, distUpdateTime);