简体   繁体   English

Angular reload时如何设置Timeout不重复

[英]How to setTimeout will not repeat when reload in Angular

I have some data and its processing code as follows:我有一些数据及其处理代码如下:

LIST = [{
    "id": "1lqgDs6cZdWBL",
    "timeUpdated": "2020-04-22 12:51:23",
    "status": "CLOSED"
}, {
    "id": "C2Zl9JWfZHSJ",
    "timeUpdated": "2020-04-22 12:51:07",
    "status": "CLOSED"
}, {
    "id": "BHbiVcCaQa2d",
    "timeUpdated": "2020-04-15 14:53:12",
    "status": "CLOSED"
}];


ngOnInit() {
  this.initializeAlertTimer();
}
initializeAlertTimer(data?: any, duration?: any) {
  const DURATION = duration ? 20000 : 1000
  setTimeout(() => {
  }, DURATION)
}

addData() {
  const data = {
     "id": "qHFw59mujN9X",
     "timeCreated": "2020-03-06 12:21:06",
     "status": "NEW",
   }
   this.initializeAlertTimer(data, 20000);
}

What I'm trying to do here is when opening the application it will list all the data LIST from the console once even it will change a page or reload the page it shouldn't repeat and when clicking on the addData() it will add the new data then by initializeAlertTime() it will display the newest data.我在这里尝试做的是,当打开应用程序时,它会从控制台列出所有数据LIST ,即使它会更改页面或重新加载它不应该重复的页面,并且在单击addData()时它会添加新数据然后通过initializeAlertTime()它将显示最新数据。

There are many ways to do the same ex: 1)Using localstorage, 2)sessionstorage 3)service class有很多方法可以做到这一点:1)使用本地存储,2)会话存储 3)服务 class

localstorage本地存储

Save into LocalStorage:保存到 LocalStorage:

localStorage.setItem('key', value);

For objects with properties:对于具有属性的对象:

localStorage.setItem('key', JSON.stringify(object));

Get From Local Storage:从本地存储中获取:

localStorage.getItem('key');

For objects:对于对象:

JSON.parse(localStorage.getItem('key'));

And you can use this part of the code to get remaining time您可以使用这部分代码来获取剩余时间

localStorage.setItem('DURATION',DURATION)
    localStorage.setItem('start',Date.now()) // milliseconds
    

when needed需要的时候

    const elapsed = Date.now() - localStorage.getItem('start');
    const remaining =  localStorage.setItem('DURATION') - elapsed; // divide by 1000 for seconds

Note :Value will be reserve when reload 2)localStorage Object will save data as string and retrieve as string.注意:重新加载时将保留值 2)localStorage Object 将数据保存为字符串并检索为字符串。 You need to Parse desired output if value is object stored as string.如果值为 object 存储为字符串,则需要解析所需的 output。 eg parseInt(localStorage.getItem('key'));例如 parseInt(localStorage.getItem('key'));

When you reload the application, all your variables and stack gets reinitialized.当您重新加载应用程序时,您的所有变量和堆栈都会重新初始化。 So there is no way to track whether the user has visited the firs time of just reloaded the application.因此,无法跟踪用户是否在第一次重新加载应用程序时访问过。

You can store some value in your database to keep track or use localstorage or session storage .您可以在数据库中存储一些值以跟踪或使用localstoragesession storage

If you want to keep track while changing the screen that could be possible by using the service and defining the variable.如果您想在更改屏幕时进行跟踪,这可以通过使用服务和定义变量来实现。

When you user visits the page for second time you just check the value of the variable stored in the service.当您用户第二次访问该页面时,您只需检查存储在服务中的变量的值。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM