In my KidStory project, built on AngularJS, there is a save function that takes an indefinite amount of time to complete (serializing a big object and creating an image from the object).
I looked for a way of checking when this operation has completed and limited it to MAX 3 sec of execution.
I needed a way that didn't involve that use of angular watches or events like ($broadcast() and/or $emit())

The solution:

I've chosen to check it through a recursive call with a resolution of 100ms.

Implemented with AngularJS



Method of checking the long running task status by a recursive queue.

Long running task can either finish in SUCCESS or FAILURE (manual input needed)
Long running task completes in 3 seconds, either in SUCCESS or FAILURE
Upon finishing, Long running task signals the recursive queue to stop checking (longTaskFinishedFlag)

The recursive check (_recursive_queue()) will continuously check, at a predetermined interval, for task completion.
Default is at 500ms (much easier to visualize in the demo).

Task completing can be interrupted. (Manual INTERRUPT)

Not implemented (further ideas)

  • No debounce, throttle and "Already initialized" checks if the init button Start Long Running Task is pressed multiple times in a sequence. Pressing multiple times rapidly will fire subsequent calls to the init() method that will run in parallel and cannot be killed by the Manual INTERRUPT button
  • No comparison on implementing same functionality with angular watches ($watch()).
  • No comparison on implementing same functionality with angular events ($broadcast() and/or $emit())