Question

我有一个棱角分明的应用程序，我想实现“ Time Ago”功能。如果我提出一些疯狂的“问题”，这是个坏主意吗？

如果您能想象有一条Facebook帖子，上面写着“大约一分钟前发布...”，那就是我的目标。

假定用户从未刷新过页面，而是将问题从信号中心接收到有角度的mdoel上

from django.db import models
from django.contrib.auth import models

class User(models.User,models.PermissionsMixin):

    def __str__(self):
        return "@{}".format(self.username)

Answer 1

我不知道有很多setTimeout调用会对性能产生什么影响，但是我宁愿将timeAgo设置为日期对象，然后检查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）。

Answer 2

好吧，newQuestion和第一个setTimeout只是样板代码，可以使某些东西可以测试。请无视。第二个setInteval是我们查看data属性的地方。此属性符合HTML标准。并可以通过[HTMLElement].dataset访问。我们将发布时间与当前时间进行测试。用一种方法。

const newQuestion = () => {
  let target = document.querySelector('.questions');
  let question = document.createElement('div');
  question.className = 'question';
  question.setAttribute('data-question-date', Date.now());
  question.innerHTML = '<span>Test Question - <span><span class="age">Just Now</span>';
  target.appendChild(question);
  
};

document.addEventListener('DOMContentLoaded', () => {
  setInterval(() => {
    newQuestion();
  }, 5000); 
  
  setInterval(() => {
    let questions = document.querySelectorAll('.question');
    questions.forEach(q => {
      let dateofQ = q.dataset.questionDate;
      let age = Math.floor((Date.now() - dateofQ)/1000);
      console.log(`age: ${age}`); 
      let ageElement = q.querySelector('.age');
      //do just 20 secs, so we don't have to wait.
      if(age < 20) {
        ageElement.innerHTML = 'Just now';
      } else if (age < 300) {
        ageElement.innerHTML = 'Less than 5 minutes ago.';
      } else {
        ageElement.innerHTML = 'More than 5 minutes ago.';
      }
    });
    
  }, 1000);
});

<div class="questions">


</div>

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

2 个答案: