title: How can I get some element width inside setInterval correctly without delaying?
body: <p>I'm trying to increase some progress bar using <code>setInterval</code>. When I test, it's working fine.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var progressBar = $('.progress-bar');
  
  var count = 0;
  
  var interval = setInterval(function () {
      var width = progressBar.width();
  
      console.log(width++);
  
      progressBar.width(width);
  
      count++;
  
      if (count === 101) {
        clearInterval(interval);
      }
  }, 50);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.progress-bar {
    width: 0px;
    height: 4px;
    background-color: #00f;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="progress-bar"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Since I nest it into dropdown, I'm getting trouble with the time to repeat every action:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var increase = function (progressBar, ms) {
      var count = 0;
  
      var interval = setInterval(function () {
          var width = progressBar.width();
  
          console.log(width++);
  
          progressBar.width(width);
  
          count++;
  
          if (count === 21) {
            clearInterval(interval);
          }
      }, ms);
  }
  
  $('.dropdown').on('shown.bs.dropdown', function () {
      var progressBar = $(this).find('.progress-bar');
      
      increase(progressBar, +progressBar.data('ms'));
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.progress-bar {
    width: 0px;
    height: 4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div class="dropdown d-inline-block"&gt;
    &lt;button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
      Progress bar with 100ms
    &lt;/button&gt;
    &lt;div class="dropdown-menu" &gt;
      &lt;a class="dropdown-item" href="#"&gt;
          &lt;div class="progress-bar" data-ms="100"&gt;&lt;/div&gt;    
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="dropdown d-inline-block"&gt;
    &lt;button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
      Progress bar with 300ms
    &lt;/button&gt;
    &lt;div class="dropdown-menu"&gt;
      &lt;a class="dropdown-item" href="#"&gt;
          &lt;div class="progress-bar" data-ms="300"&gt;&lt;/div&gt;    
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I open the dropdown, the progress bar width will be increased. But there is something wrong when I try different values to repeat the action.</p>
  
  <p>In the example, if I set the value to <code>100</code> or lower, I'll get the progress bar width <em>wrongly</em>. The default width value is <code>0</code>, after increasing (by adding <code>1</code>), why it's <code>0.15625</code> and then <code>0.3125</code>...?</p>
  
  <p>Another try, if I set the value to <code>300</code> or higher, I get the width <em>correctly</em> <em>(0, 1, 2...)</em></p>
  
  <p>Anyone knows why?</p>