角度 2 相当于$timeout

Question

我必须在 Angular 2 环境中使用(大量(现有代码。该代码广泛使用了AngularJS 1.x的$timeout服务。与代码中使用的各种其他 AngularJS 1.x 服务相反，我很难找到有关$timeout服务的 Angular 2 等效项的信息。

Angular 文档似乎没有提到名称中带有timeout-something 的服务。文章从AngularJS升级确实提到了我面临的场景：

也许你想访问AngularJS的内置服务，如$location或$timeout。

不幸的是，本文实际上并没有解释如何访问这些特定的服务，因为后续示例HeroesService假设一个没有 AngularJS 1.x 提供任何依赖项的服务。

诸如此类的文章建议使用本机setTimeout函数也无法达到$timeout服务的功能。

如何在 Angular 2 环境中重现$timeout功能？

编辑：正如答案中所指出的，本机setTimeout函数的缺点在使用Angular 2时无关紧要。在这种情况下，如果我有 AngularJS 1.x 的完整$q，我可以大致像这样复制$timeout函数：

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

使用本机函数setTimeout。不再需要在 Angular 中使用特殊服务。这是由于引入了区域，特别是NgZone。

像这样的文章建议使用本机 setTimeout 函数 也达不到$timeout服务的功能。

你为什么这么说？$timeout服务的主要任务是在执行延迟函数后启动摘要。您可以从来源中看到它：

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);

在 Angular 中zone.js拦截所有异步操作并在 Angular 中启动更改检测，这是一种摘要的增强版本。

如果需要复制$timeout，可以大致如下：

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);