Javascript 我是否以低效的方式使用setTimeout？

我有一个angular应用程序，我想实现一个“很久以前”的功能。如果我提出一些疯狂的“问题”，这是个坏主意吗

如果你能想象一个facebook帖子上写着“大约一分钟前发布……”，那就是我拍摄的目的

假设用户从未刷新过页面，并且问题从一个符号中心附加到角度mdoel

export interface IQuestion {
  timeAgo: string;
}

export class Question implements IQuestion {
  public timeAgo: string;
  constructor(question: IQuestion) {
    this.timeAgoTicker();
  }
  timeAgoTicker(): void {
    this.timeAgo = 'just now';
    setTimeout( () => this.timeAgo = 'about a minute ago', 10000);
    setTimeout( () => this.timeAgo = 'a couple of minutes ago', 20000);
    setTimeout( () => this.timeAgo = '5 minutes ago', 50000);
    // etc...
  }
}

---

我不知道有许多setTimeout调用会对性能产生什么影响，但我宁愿将timeAgo设置为日期对象，然后在更新UI时检查now和该日期对象之间的差异：

export interface IQuestion {
  createdAt: Date;
}

export class Question implements IQuestion {
  public createdAt: Date;
  constructor(question: IQuestion) {
    this.createdAt = new Date();
  }

  getAge(): String {
    return (new Date() - this.createdAt).toSomeStringAccordingToAge()
  }
}

---

我不知道语法是否正确，因为我不使用Typescript。例如，下面提到的一条评论指出，最好使用访问器getter。

我不知道有许多setTimeout调用会对性能产生什么影响，但我宁愿将timeAgo设置为日期对象，然后在更新UI时检查现在和该日期对象之间的差异：

export interface IQuestion {
  createdAt: Date;
}

export class Question implements IQuestion {
  public createdAt: Date;
  constructor(question: IQuestion) {
    this.createdAt = new Date();
  }

  getAge(): String {
    return (new Date() - this.createdAt).toSomeStringAccordingToAge()
  }
}

我不知道语法是否正确，因为我不使用Typescript。例如，正如下面提到的一条注释所述，最好使用访问器getter。

好的，newQuestion和第一个setTimeout只是让测试工作的样板代码。请忽略。第二个setInteval是我们查看数据属性的地方。此属性符合HTML标准。并可通过[HtmleElement].dataset访问。我们根据电流测试post时间。在单一方法中

const newQuestion==>{ 让target=document.querySelector'.questions'； 让问题=document.createElement'div'； question.className='question'； setAttribute'data-question-date'，date.now； question.innerHTML='测试问题-刚才'； 目标问题； }; document.addEventListener'DOMContentLoaded'，=>{ setInterval=>{ 新问题； }, 5000; setInterval=>{ 让问题=document.queryselectoral.question'； questions.forEachq=>{ 设dateofQ=q.dataset.questionDate； 让age=Math.floorDate.now-dateofQ/1000； log`age:${age}`； 让ageElement=q.querySelector'.age'； //只要20秒，我们就不用等了。 ifage<20{ ageElement.innerHTML='Just now'； }如果年龄<300，则为其他{ ageElement.innerHTML='不到5分钟前'； }否则{ ageElement.innerHTML='超过5分钟前'； } }; }, 1000; }; 好的，newQuestion和first setTimeout是唯一的样板代码，用于测试工作。请忽略。第二个setInteval是我们查看数据属性的地方。此属性符合HTML标准。并可通过[HtmleElement].dataset访问。我们根据电流测试post时间。在单一方法中

const newQuestion==>{ 让target=document.querySelector'.questions'； 让问题=document.createElement'div'； question.className='question'； setAttribute'data-question-date'，date.now； question.innerHTML='测试问题-刚才'； 目标问题； }; document.addEventListener'DOMContentLoaded'，=>{ setInterval=>{ 新问题； }, 5000; setInterval=>{ 让问题=document.queryselectoral.question'； questions.forEachq=>{ 设dateofQ=q.dataset.questionDate； 让age=Math.floorDate.now-dateofQ/1000； log`age:${age}`； 让ageElement=q.querySelector'.age'； //只要20秒，我们就不用等了。 ifage<20{ ageElement.innerHTML='Just now'； }如果年龄<300，则为其他{ ageElement.innerHTML='不到5分钟前'； }否则{ ageElement.innerHTML='超过5分钟前'； } }; }, 1000; };

---

嗯，我更喜欢一个超时，查看所有问题并使用switch语句更新页面上的问题。这增加了页面的负载，虽然不是什么大交易，但我应该提到，问题是通过信号器实时传递的。“何时启动计时器”的管理被认为是准确的。它可以避免将我们的模型与演示分离。有道理？多语言等等怎么样？我觉得这个主意很酷。但我仍然希望对查看模型集合的表示层进行集中刷新。如果您看看StackExchange是如何做到这一点的，它们会以60000毫秒的间隔查找所有$'span.relativetime，span.relativetime clean'，然后根据当前时间更新其文本内容。如果你整理full.js，你会发现有一个工厂StackExchange.realtime可以做到这一点。搜索relativetime以查找函数L将来可能会更改，然后在当前版本的函数r的相同范围内搜索调用此函数的位置，在那里您将看到它被调用

---

---

在一个名为every60000ms.Hmmm的函数中，我更喜欢一个超时，它可以查看所有问题并使用switch语句更新页面上的问题。这增加了页面的负载，虽然不是什么大交易，但我应该提到，问题是通过信号器实时传递的。“何时启动计时器”的管理被认为是准确的。它可以避免将我们的模型与演示分离。有道理？多语言等等怎么样？我觉得这个主意很酷。但我仍然希望对查看模型集合的表示层进行集中刷新。如果您看看StackExchange是如何做到这一点的，它们会以60000毫秒的间隔查找所有$'span.relativetime，span.relativetime clean'，然后根据当前时间更新其文本内容。如果你整理full.js，你会发现有一个工厂StackExchange.realtime可以做到这一点。搜索relativetime以查找函数L将来可能会更改，然后在当前版本的函数r的相同范围内搜索调用此函数的位置，在那里，你会看到它在一个函数中被调用，这个函数本身每60000ms调用一次。然后在其他地方，你可以有一个setTimeout方法，根据结果定期更新UI。或者，如果是单向状态传播，那么getAge方法应该更新，我想在呈现答案的组件上实现一个功能来计算时间是另一种选择。我想我关心的是数量。如果只是几个问题，那没关系。但如果我最后有100万个问题，显然不会成功。在那个离谱的例子中，您是宁愿运行setTimeout来重新评估列表，还是让每个记录都用setTimeout更新自己？我不知道如果运行一百万次，即使是const x='hi'也会做什么。而是根据您当前的最佳知识让它工作，然后在出现性能瓶颈时修复它们。从长远来看，这将节省您的时间。否则，您会发现您花时间找出的“优化”解决方案实际上并没有得到优化，因此您无论如何都必须更改它们，它们往往会使代码变得更复杂，就像这样，但有一个建议。使用getter而不是get age:String{return…}方法，然后在其他地方可以有一个setTimeout方法，根据结果定期更新UI。或者，如果是单向状态传播，那么getAge方法应该更新，我想在呈现答案的组件上实现一个功能来计算时间是另一种选择。我想我关心的是数量。如果只是几个问题，那没关系。但如果我最后有100万个问题，显然不会成功。在那个离谱的例子中，您是宁愿运行setTimeout来重新评估列表，还是让每个记录都用setTimeout更新自己？我不知道如果运行一百万次，即使是const x='hi'也会做什么。而是根据您当前的最佳知识让它工作，然后在出现性能瓶颈时修复它们。从长远来看，这将节省您的时间。否则，您会发现您花时间找出的“优化”解决方案实际上并没有得到优化，因此您无论如何都必须更改它们，它们往往会使代码变得更复杂，就像这样，但有一个建议。使用getter而不是get age:String{return…}方法我没有对此投票，但是只有代码的答案经常被否决。如果你能添加一些解释，那会更有帮助。问题不是“怎么做”。这是“这是最有效的方法吗？”。你的回答不仅与角度框架背道而驰，而且是对如何做同样的事情的反刍，这些事情已经以一种香草js的方式完成了，但你没有被问到。但是你问它是否“有效”。香草只是用来搭建演示的。我没有对此投票，但只有代码的答案经常被否决。如果你能添加一些解释，那会更有帮助。问题不是“怎么做”。这是“这是最有效的方法吗？”。你的回答不仅与角度框架背道而驰，而且是对如何做同样的事情的反刍，这些事情已经以一种香草js的方式完成了，但你没有被问到。但是你问它是否“有效”。香草只是用来搭建演示的。