Angular中setTimeout的目的是啥？

Posted 2023-04-14

【中文标题】Angular中setTimeout的目的是啥？

【英文标题】：What is the purpose of setTimeout in Angular?Angular中setTimeout的目的是什么？

【发布时间】：2018-02-25 00:50:29

【问题描述】：

下面是 Angular.io 英雄之旅教程中的一段代码：

getHeroesSlowly(): Promise<Hero[]> 
  return new Promise(resolve => 
     // Simulate server latency with 2 second delay
    setTimeout(() => resolve(this.getHeroes()), 2000);
  );

描述说明：要模拟慢速连接，请导入 Hero 符号并将以下 getHeroesSlowly() 方法添加到 HeroService。

我了解基于慢速连接构建网站是最佳做法，其中有两个示例，例如 here 和 here。

但是为什么我要设置一个计时器来测试构建（就像 Angular 建议的那样）而不是限制连接（比如在 Chrome 中）？

【问题讨论】：

因为教程给你一个简单的代码块比解释如何使用你的开发者工具来限制网络要容易得多。

那我换个说法。是否有时间使用计时器而不是节流更有益？

您的问题是针对示例还是一般问题？

@AngularInDepth.com 一般

@Liam，好的，然后看my answer

【参考方案1】：

在您的示例中，setTimeout 用于在两秒内模拟服务器响应。这并不一定意味着它模拟了慢速连接。由于各种原因，响应可能会在 2 秒内出现，其中一个原因是服务器需要 2 秒才能完成其工作。但是，正如您所注意到的，这不是生产代码，而是用于演示框架的特定功能。

setTimeout 在生产代码中最常见的用途是允许 Angular 在您将同步执行的操作之间运行一次更改检测。在文章Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error 中建议使用此方法作为错误的可能解决方案。

【参考方案2】：

正如您所引用的，这只是与 API 的慢速连接的一个基本示例，因此您可以看到加载数据。 如您所说，限制连接（在 Chrome 中）不会模拟 API 和客户端之间连接的延迟，它会减慢整个网页的速度。

同时使用这两种技巧会更有趣。

【参考方案3】：

我认为这样做的重点是因为它实际上并没有访问服务器。我认为 getHeros 方法只是返回硬编码数据。他们试图演示如何使用 Promises Angular 样式，并让它在返回前等待几秒钟，这有助于您了解如何在实际拥有数据之前处理状态。 IE。检查以确保在迭代列表之前填充列表。