regresar a la lección

Decorador de retraso

importancia: 5

Cree un decorador delay(f, ms) que retrase cada llamada de f en ms milisegundos.

Por ejemplo

function f(x) {
  alert(x);
}

// crear contenedores
let f1000 = delay(f, 1000);
let f1500 = delay(f, 1500);

f1000("test"); // mostrar "test" después de 1000ms
f1500("test"); // mostrar "test" después de 1500ms

En otras palabras, delay (f, ms) devuelve una variante "Retrasada por ms" def.

En el código anterior, f es una función de un solo argumento, pero en esta solución debe pasar todos los argumentos y el contexto this.

Abrir en entorno controlado con pruebas.

Solución:

function delay(f, ms) {

  return function() {
    setTimeout(() => f.apply(this, arguments), ms);
  };

}

let f1000 = delay(alert, 1000);

f1000("test"); // mostrar "test" después de 1000ms

Tenga en cuenta cómo se utiliza una función de flecha aquí. Como sabemos, las funciones de flecha no tienen contextos propios this ni argumentos, por lo que f.apply(this, arguments) toma this y arguments del contenedor.

Si pasamos una función regular, setTimeout lo llamaría sin argumentos y this = window (suponiendo que estemos en el navegador).

Todavía podemos pasar el this correcto usando una variable intermedia, pero eso es un poco más engorroso:

function delay(f, ms) {

  return function(...args) {
    let savedThis = this; // almacenar esto en una variable intermedia
    setTimeout(function() {
      f.apply(savedThis, args); // úsalo aquí
    }, ms);
  };

}

Abrir la solución con pruebas en un entorno controlado.