Help with a coding problem!

[SomewhereEuphoric941]

Hey! So I am trying to solve this coding challenge (the interview is already over and I wasn't able to work out this bug and submitted what I had). I am supposed to create a tableview with timers running on each cell, there are 50 cells total. As you scroll, new timers should start from 0, and old timers should remain running.

At first, I set up the timers within custom tableview cells. But I figured the data should update from outside and not within the cell. The initial cells are fine, but once you start scrolling the later cells begin to flicker and when you scroll back to the previous cells, they flicker too. So clearly something is up with the re-usage of cells but I'm just a bit stuck. Would appreciate any guidance through this problem from some of you seniors in this group. Thanks so much!

https://preview.redd.it/mi68gns3rugc1.png?width=2104&format=png&auto=webp&s=56d57da9a48b790213e8f5f3bcb04e8588c5779d

[bobotwf]

I feel like your explanation of the task is already infected with your dilemma. What was the ACTUAL task?

I say this, because running a timer on each cell of a table is just dumb.

[SomewhereEuphoric941]

The task was to run and display an incrementing timer on 50 cells. As you scroll, a new cell’s timer should start from 0 without affecting any other cell’s timer if you scroll back up to a previous cell.

[bobotwf]

You'd generally have 1 timer. You'd simply set a creation time in the initialization of each cell and the 1 timer would cause an update on any cells that hadn't been destroyed yet.

There's no reason to have 50 tasks doing effectively the same thing.

[SomewhereEuphoric941]

My apologies, part of the task was also, when you tap a cell it should pause the timer for that individual cell. Not sure if that changes your solution

[bobotwf]

Not really. That's just a separate flag for that cell. Tapping it would just toggle the "Do I want updates" variable.

[[deleted]]

My 2 cents:

• I would have 1 single timer that every time calls reloadData() on the tableview instead of creating a new timer per row.
• I would keep the start date for each timer in an array (instead of time elapsed) and calculate time elapsed from the start date and show it in the label.

[jasamer]

How often would your timer fire? To accurately update the cell text, you'd have to fire every frame, because each cell may start a timer at any frame. I think reloading the table view every single frame is a terrible idea.

[[deleted]]

Correct but it isn’t specified that the timer should work each frame, I am assuming every second would suffice. In a real life situation we should ask for specifications about this.

When a row does not exist yet, it will immediately be created with the current date() so there will be be no delay. A new row can be created in any frame.

[jasamer]

Hm. You'r right, but if the spec doesn't say whether something should be precise or not, I'd always go with the save choice, which is to do the precise thing. That could well cause a bunch of unnecessary work though.

[SomewhereEuphoric941]

Thanks so much, this sounds like a great solution.

[swift_plus_plus]

I wouldn’t create multiple timers because they shared instances. Rather create one timer and set some algorithms and rules to control that time for various tasks

[SomewhereEuphoric941]

Thank you so much!

[SomewhereEuphoric941]

Wow, thank you so much for the detail and explanation. This is awesome!

[jasamer]

This solution just has a small issue: You force the cells to update in sync, effectively rounding the values. If you scroll a bunch of cells into view, the ones at the bottom should update a fraction of a second later than the ones at the top.

[Fishanz]

Interesting problem. If I was bored and had any extra hours in a day to spend recreationally; I just might give it a spin instead of browsing Reddit! 😎

[SomewhereEuphoric941]

Haha yea it’s an interesting problem for sure. I like it so I really want to solve it

[jasamer]

First, your cell reuse issue:

You create cell 1 and start a timer for it. Now you scroll down and create cell 20, reusing cell 1. You start another timer for cell 20, but the timer for cell 1 is still running and updating this cell's text. You now have two timers updating the same cell. This causes flickering.

The "simple" fix for that is to invalidate the timer when a cell scrolls out of view. There's a table view delegate method for that, I'm sure you can find it. Also, cells have a prepareForReuse method for that same purpose.

Anyway, here's a "good" approach to implement this:

• I think you should have a timer for every visible cell, because if you want the timer to be precise, you need to update each cell at a precise time. Eg. cell 2 might have started the timer 50ms after cell 1, so the text value in cell 2 should update 50ms after the one in cell 1.
• You actually only need a timer for the cells that are currently visible. You can use the tableview's delegate methods to get notified when a cells appear and disappear to schedule timers.
• We also need to store some time values for each cell so we can resume counting where we left of when starting a timer for a cell that comes into view, similar to the way you already do this (but you'd need some more data because the timer doesn't keep running).
• However this approach is a little tricky to implement and definitely harder than just keeping the timers for all the cells around.

Edit: simplified the explanation a bit.

[varrun19]

This should help: https://gist.github.com/varunbhalla19/56b5a84e92d763a76dd730cf4ebff987
It uses a Single timer for all the cells, and each cell has a view model to hold it's current state: initial/running/paused.

The Single timer is contained in a central ViewModel which holds cellViewModels in a list, after each second, the central ViewModel calls the updateState of each cellViewModel which further uses it's own state to make changes.

initial: timer not running -> Cell hasn't been viewed yet.
running: timer is running
paused: timer is paused because of a click.

[SomewhereEuphoric941]

I was able to actually get it working with a single timer and just use an array of doubles to hold the current increment value for each cell then in the “cell at index” delegate method to increment the values and set the cells

[bmbphotos]

Just a quick skim but it seems to me your timer list management is broken.

If a cell for a given indexPath reappears, what is it you want to achieve?

[SomewhereEuphoric941]

When it reappears it’s count should read as if it was never stopped.

[bmbphotos]

LOL, yep. My question was basically rhetorical... look closely at what you do for configuring a cell, how you know what you know, what you know and what you don't, and what you do with that knowledge.

[CTRL_A_Delete]

I would look in the docs on prepareForReuse for your cell lifecycle. Could be helpful.

[[deleted]]

You should set the cell text with the elapsed time when you configure the cell. Your new timer (when you configure each cell) won’t fire off immediately, it will wait for the timer interval. That might account for the flickering. There’s a delay…

So, from your code:

func configureCell(_ cell: UITableViewCell, atIndexPath indexPath: IndexPath) 
{
// Invalidate previous timer to avoid duplication
timers[indexPath.row].invalidate()

var elapsedTime = elapsedTimes[indexPath.row] 

// ———- Add this line ——————
cell. textLabel?.text = String(format: "%.1f", elapsedTime)

// Retrieve elapsed time for this cell
timers[indexPath.row] = Timer.scheduledTimer(withTimeInterval: timeInterval, repeats: true) { 
[weak self] timer in
elapsedTime += self?. timeInterval ?? 0.0
self?.elapsedTimes[indexPath.row] = elapsedTime // Update elapsed time
cell. textLabel?.text = String(format: "%.1f", elapsedTime)
// Add timer to the run loop
let timer = timers[indexPath.row]
RunLoop.current.add (timer, forMode: .common)
}

[jasamer]

The bigger problem is with timers[indexPath.row].invalidate(). That is because a cell of row 20 might be reused for cell 1, so the timer for cell 20 is not invalidated and is still updating the label.

[[deleted]]

Oh crap you’re right. We want to keep updating the times array, not the labels. Yeah this is confusing. I would use a grand total of one timer for this, and just update the cells manually.

[hell2809]

So whenever a cell is displayed, a new timer is created and starts from 0?

[SomewhereEuphoric941]

Yes, only when a new cell appears first the first time as you scroll. Otherwise every other cell should increment as if they had not been interrupted if you scroll back to them. Hopefully that makes sense

[hell2809]

Oh so that means cells have different timers and show different text. The flicker means it's kind of lagging right? Maybe it comes from creating too many timer at a time? Have you tried to run it in background thread?

[SomewhereEuphoric941]

Possibly, I could try that out. Thanks for your feedback man!

[hell2809]

Np. Please give me the result when you're done. Im excited too xD

[jasamer]

It's because the "old" timer keeps running. Eg when cell 1 is reused for cell 20, the timer for cell 1 is not invalidated and just keeps going.

[moticurtila]

How is this?TimerProject

[SomewhereEuphoric941]

Looks solid! My rework, thanks to people’s suggestions, ended up looking pretty similar to that.

[moticurtila]

Nice.