javascript - Run js function n times

Question

I have a number counter script.

var $findme = $('#numbers');
var exec = false;

function Scrolled() {
  $findme.each(function() {
    var $section = $(this),
      findmeOffset = $section.offset(),
      findmeTop = findmeOffset.top,
      findmeBottom = $section.height() + findmeTop,
      scrollTop = $(document).scrollTop(),
      visibleBottom = window.innerHeight,
      prevVisible = $section.prop('_visible');

    if ((findmeTop > scrollTop + visibleBottom) ||
      findmeBottom < scrollTop) {
      visible = false;
    } else visible = true;

    if (!prevVisible && visible) {
      if (!exec) {
        $('.fig-number').each(function() {
          $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
          }, {
            duration: 2000,
            step: function(now) {
              $(this).text(Math.ceil(now));
              exec = true;
            }
          });
        });
      }
    }
    $section.prop('_visible', visible);
  });

}


function Setup() {
  var $top = $('#top'),
    $bottom = $('#bottom');

  $top.height(500);
  $bottom.height(500);

  $(window).scroll(function() {
    Scrolled();
  });
}
$(document).ready(function() {
  Setup();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hww-whyus-item-num" id="numbers"> <span>0</span> <span class="fig-number">9</span> </div>

question from:https://stackoverflow.com/questions/65910576/run-js-function-n-times

Answer 1

Maybe you can use promises like this

// number of runs
var times = 3;
// number of items
var items = 6;
 
// makes a promise which will resolve when all items are made
let makeItem = () => {
  return new Promise( (done) => {
    for(var i = 0; i < items; i++){
       console.log('Item #0' + i);
    }
    done();
  });
}
// run asynchronoulsy and wait until makeItem is done to execute next iteration
let run = async () => {
  for(var i = 0; i < times; i++){
       console.log('Run #' + (i + 1));
      await makeItem();
    }
}

run();

Edit: Sorry your code uses jquery so I updated my answer using jquery as well:

// number of runs
var times = 3;
// number of items
var items = 6;

container = $("#container");

function makeItem(it, el) {
  for(var x = 0; x < it; x++)
  {
    el.append("<li>item #0"+x+"</li>");
  }
}

async function run(times){
    let result;
  for(var i = 0; i < times; i++){
    container.append("<h2>Run #"+(i + 1)+"</h2>");
    try{
      result = await makeItem(items, container);
    }catch(error){
        console.log(error);
    }
  }
}

run(times);