How to stop a running setInterval

Question

I have created one progress-bar for my web page. I need to stop it, Here is my script for the progress-bar, how I can stop progress-bar before time complete

var elem = document.getElementById("progress-bar");
var width = 1;
var id = {};

function progressBar1() {
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + "%";
    }
  }
  id = setInterval(frame, 160);
}

      #progress-bar {
        height: 10px;
        width: 0;
        background-color: #000;
        position: relative;
        transition: linear;
      }

    <div id="progress-bar"></div>
    <button id="start" onclick="progressBar1()">Start</button>
    <button id="stop">Stop</button>
    <button id="reset">Reset</button>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>

Answer 1

What you need is the "clearInterval" function:

function stopProgressBar() {
  clearInterval(id);
}

here is the doc for it: https://www.w3schools.com/jsref/met_win_clearinterval.asp