JavaScript closure inside loops-ejemplo práctico simple

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

Produce esto:

Mi valor: 3
Mi valor: 3
Mi valor: 3

Mientras que me gustaría que la salida:

Mi valor: 0
Mi valor: 1
Mi valor: 2

El mismo problema ocurre cuando el retraso en la ejecución de la función es causado por el uso de receptores de eventos:

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {          // let's create 3 functions
  buttons[i].addEventListener("click", function() { // as event listeners
    console.log("My value: " + i);                  // each should log its value.
  });
}

<button>0</button><br>
<button>1</button><br>
<button>2</button>

Code o código asíncrono, por ejemplo, usando Promesas:

// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

for(var i = 0; i < 3; i++){
  wait(i * 100).then(() => console.log(i)); // Log `i` as soon as each promise resolves.
}

¿Cuál es la solución a este problema básico?