Settimeout() Method Inside A While Loop

I have read the relevant pages on w3schools and other similar questions here but cannot seem to understand what's wrong about the following bit : var myfunc03 = function (i) { do

Solution 1:

The while loop will not wait for setTimeout() to complete. You need to set different time delay for each to execute them with different times and use closure for holding the value of i. Also in your case, function will be executed initially and return value is setting as argument in setTimeout(), so either you need to call the function inside an anonymous function or set the function directly.

var myFunc01 = function() {
  var i = 0;
  while (i < 100) {
    (function(i) {
      setTimeout(function() {
        document.getElementById('d01').innerHTML += 100 - i + "<br>";
      }, 1000 * i)
    })(i++)
  }
};

myFunc01();

<spanid="d01"></span>

---

Although setInterval() can be used here

var myFunc01 = function() {
  var i = 0;
  // store the interval id to clear in futurevar intr = setInterval(function() {
    document.getElementById('d01').innerHTML += 100 - i + "<br>";
    // clear the interval if `i` reached 100if (++i == 100) clearInterval(intr);
  }, 1000)

}

myFunc01();

<spanid="d01"></span>

Solution 2:

You can do it more simply with recursion:

var i = 0;
functionf1() { ... };   
functionf() {
    f1();
    i += 1;
    setTimeout(function() {
        if(i < 100) {
            f();
        }
    }, 1000);
}
f();

Example

var i = 0;

var myfunc03 = function(i) {
  document.getElementById('d01').innerHTML += 100 - i + "<br>";
};

var myFunc01 = function() {
  myfunc03(i);
  i += 1;
  setTimeout(function() {
    if (i < 100) {
      myFunc01();
    }
  }, 1000);
}

myFunc01();

<divid="d01"></div>

---

A reusable function

functionsay(sentence) {
  console.log(sentence);
}

functionsayHello() {
  say("Hello!");
}

var fn = sayHello;
var count = 10;
var ms = 1000;

functionrepeat(fn, count, ms) {
  var i = 0;

  functionf() {
    fn();
    i += 1;
    setTimeout(function() {
      if (i < count) {
        f();
      }
    }, ms);
  }

  f();
}

repeat(fn, count, ms);

Solution 3:

while waiting for setTimeout :

(async () => {
  var i = 0;
  while (awaitnewPromise(resolve =>setTimeout(() =>resolve(i++), 1000)) < 100) {
    console.log("I get printed 100 times every second");
  }
})();

Solution 4:

Yes. There are 2 problems in your code:

1. The setTimeout function accept a function as the first argument, but in your code, myfunc03(i) returns nothing
2. The while loop won't meet you needs, instead, you have to use recursive function. Since the second function should be invoked after the first timeout is fired.

Sample code:

var myfunc03 = function (i) {
  setTimeout(function() {
    document.getElementById('d01').innerHTML += 100-i+"<br>";
    if (i < 100) {
      i++;
      myfunc03(i);
    }
  }, 1000);
};

var myFunc01 = function() {
  myfunc03(0);
};

myFunc01();

<divid="d01"></div>

Solution 5:

• I think you are missing a semicolon on the setTimeout and you should try passing the arguments in the below fashion:

  setTimeout(myfunc03, 1000*i, i);