javascript - example - page title angular 4

Angular 2 equivalente para $ timeout

Question

Tengo que usar (grandes cantidades de) el código existente en un entorno Angular 2. Ese código hace un uso extensivo del servicio $timeout de AngularJS 1.x. A diferencia de otros servicios de AngularJS 1.x que se usan en el código, me cuesta mucho encontrar información sobre un equivalente de Angular 2 para el servicio de $timeout .

Los documentos de Angular no parecen contener ninguna mención de un servicio con timeout algo en su nombre. El artículo Upgrading from AngularJS menciona el escenario al que me enfrento:

Quizás desee acceder a los servicios integrados de AngularJS como $location o $timeout .

Desafortunadamente, el artículo no explica realmente cómo acceder a esos servicios en particular, ya que el ejemplo posterior HeroesService asume un servicio sin ninguna dependencia proporcionada por AngularJS 1.x.

Artículos como este sugieren que usar la función nativa setTimeout tampoco está a la altura de las capacidades de los servicios de $timeout .

¿Cómo puedo reproducir la funcionalidad $timeout en el entorno Angular 2?

EDITAR: Como se ha señalado en las respuestas, los inconvenientes de la función nativa setTimeout no son relevantes cuando se usa Angular 2. En ese caso, si tuviera los $q completos de AngularJS 1.x, podría replicar la función $timeout aproximadamente Me gusta esto:

function $timeout(fn, delay) {
    var result = $q.defer();
    setTimeout(function () {
        $q.when(fn()).then(function (v) {
            result.resolve(v);
        });
    }, delay);
    return result.promise;
}

Answer 1

Utilice la función nativa setTimeout . Ya no es necesario utilizar servicios especiales en Angular. Esto se debe a la introducción de zones , específicamente NgZone .

Artículos como este sugieren que usar la función nativa setTimeout tampoco está a la altura de las capacidades de los servicios de $ timeout.

¿Por qué te hace decir eso? La tarea principal del servicio de $timeout fue iniciar la compilación después de que se ejecutó la función retrasada. Puedes verlo desde las fuentes:

function $TimeoutProvider() {
  this.$get = [''$rootScope'', ''$browser'', ''$q'', ''$$q'', ''$exceptionHandler'',
    function($rootScope,   $browser,   $q,   $$q,   $exceptionHandler) {

        timeoutId = $browser.defer(function() {
          try {
            deferred.resolve(fn.apply(null, args));
          } catch (e) {
          ...

          if (!skipApply) $rootScope.$apply();  <-------------------- here
        }, delay);

En Angular zone.js intercepta todas las operaciones asíncronas e inicia la detección de cambios en Angular, que es una especie de versión mejorada de resumen .

Si necesita replicar el $timeout , puede hacerlo de esta manera:

function $timeout(fn, delay, ...args) {
  let timeoutId;

  $timeout.cancel = $timeout.cancel || function (promise) {
    if (promise && promise.$$timeoutId in $timeout.promises) {
      $timeout.promises[promise.$$timeoutId][1](''canceled'');
      delete $timeout.promises[promise.$$timeoutId];
      return clearTimeout(promise.$$timeoutId);
    }
    return false;
  };

  $timeout.promises = $timeout.promises || {};

  const promise = new Promise((resolve, reject) => {
    timeoutId = setTimeout(function () {
      try {
        resolve(fn.apply(null, args));
      } catch (e) {
        reject(e);
      } finally {
        delete $timeout.promises[promise.$$timeoutId];
      }
    }, delay);

    $timeout.promises[timeoutId] = [resolve, reject];
  });

  promise.$$timeoutId = timeoutId;

  return promise;
}

// some basic testing

$timeout((v) => {
  console.log(''a'', v);
}, 2000, 7);

const promise = $timeout(() => {
  console.log(''b'');
}, 3000);

promise.catch((reason) => {
  console.log(reason);
});

$timeout.cancel(promise);