Why doesn't this setInterval function clear immediately

Question

See the following code. Expected behaviour would be to see a single '100' in console and then nothing more as the interval is cleared. However it actually logs between 2-3 '100's each time before clearing. Why isn't the interval getting cleared immediately?

var endpoint = "https://example.com";
axios
  .post()
  .then(function(response) {
    var timerId = setInterval(function() {
      axios
        .get(endpoint + response.data.url)
        .then(function(response) {
          console.log(response.data.percentageComplete);
          if (response.data.percentageComplete == 100) clearInterval(timerId);
        })
        .catch(function(error) {});
    }, 1000);
  })
  .catch(function(error) {});

Answer 1

Because you're clearing it once an HTTP request has successfully completed, and that request may take a few seconds to complete. In the meantime one or two more of these requests are triggered by setInterval .