2015-06-26 22:11
浏览 36

Project Management App如何使用JavaScript和PHP处理任务计时器

More recently I have started to see some Project Management applications providing a Timer function/button on a Task.

The user can click to start the timer and it will record elapsed time and save to backend for that Task record.

The main reason I have never tried to add this functionality into my Project Management app that I am currently building is due to the fact, as soon as the user browses to another page in the app or web, there JavaScript Timer becomes useless!

One way I have seen some apps tackle this issue is by having every page in the app load using AJAX so that they can have a Timer Bar across the bottom of the screen which will remain there even as they navigate inside the PM app.

This seems like a pretty good method however in my situation I cannot do that. My Project Management app is a SugarCRM module so I cannot change how the main app flow works.

So my question is, what are some reliable ways to implement Task Timers in a PM app?

I would assume that it might would have to work together with PHP to somewhat stay in sync between the frontend JavaScript Timer and the backend.

For instance, say you have a Timer running on a Task for a few minutes and then you navigate away from the app. 1 hour later you load the PM app, it would be nice if the JavaScript timer would use the backend start timer time and calculate the elapsed time and then have the JavaScript timer simply start off from where it would have been if you had stayed in the App the whole past hour!

To clarify:

  • You load PM app and start timer. It counts up to 00:03:00
  • You navigate away from the app or even close it.
  • You come back and load the app 1 hour later.
  • THe JavaScript Timer would then start showing 01:03:00 and counting up from that value.

Does this sound feasible even?

图片转代码服务由CSDN问答提供 功能建议

最近我开始看到一些项目管理应用程序提供计时器功能/按钮 在任务上。


我之前从未尝试将此功能添加到我正在构建的Project Management应用程序中的主要原因是,一旦用户浏览应用程序或Web中的另一个页面,JavaScript Timer就变得无用了!

我看到一些应用程序处理此问题的方法是使用AJAX加载应用程序中的每个页面,以便他们可以在屏幕底部有一个计时器栏,即使它们也会保留在那里 在PM应用程序内导航。

这似乎是一个非常好的方法,但在我的情况下,我不能这样做。 我的项目管理应用程序是一个SugarCRM模块,所以我无法改变主应用程序流的工作方式。

所以我的问题是,在PM应用程序中实现任务计时器有哪些可靠的方法? / p>

我认为它可能必须与PHP一起工作才能在前端JavaScript Timer和后端之间保持同步。

例如,假设您有一个Timer在任务上运行几分钟,然后您离开应用程序。 1小时后你加载PM应用程序,如果JavaScript计时器将使用后端启动计时器时间并计算已用时间,然后让JavaScript计时器从你原来的位置开始,那将是很好的。 应用整个过去一小时!


  • 您加载PM应用并启动计时器。 它最多可以计算 00:03:00
  • 您可以离开应用程序甚至关闭它。
  • 你回来加载 1小时后的应用程序。
  • 然后JavaScript计时器将开始显示 01:03:00 并从该值开始计数。


  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongmei2351 2015-06-26 22:19

    Yeah it's feasible, don't rely on the client. You need to save a start time to your db and have your client timer kick off at the same time. Just add a runtime check in your js to see what the start time was and do the math. That way it doesn't matter if someone refreshes the browser, loses network connection, or turns off their computer.

    The client just does what the server tells is to do.

    Brief Scenario

    Step one: Client POST

    1. POST a date object time stamp to the server -or-
    2. Set up an end point to POST to so the client doesn't even have to worry about creating any date objects

    Step two: Client Timer

    On the click event start the timer locally in JS

    Step three: Add runtime check

    If the user refreshes their browser or performs any action that requires a page re-render you have couple options. 1. GET the start time from the server for existing timers and do the math in the client 2. GET the start point from an existing endpoint (Preferred) and just kick off the timer where the API said to

    Bonus points: I definitely wouldn't use local storage for this, BUT you could use local storage as a backup.

    Example: JS runs > no network detected > reference local storage

    Annnnnnnd just in case here is some pseudo code because there are a lot of ways you could do this. Assuming that getActiveTimers performed a GET to an endpoint that returned JSON with all active timers and said start times and startTimer does the math in the client. As stated before you could have the calulations done server side so that client could just start and the provided time.

    var init = function() {
      getActiveTimers(function(rsp) {
        if (rsp.timers) {
      $('.js-timer').on('click', function() {
        // do time stuff 

    The biggest takeaway here is yes, you can do this it is done ALL the time. I would also recommend looking into REST. Goodluck!

    解决 无用
    打赏 举报

相关推荐 更多相似问题