Updating label in time shows up all at once - ios

Question

I have a label that I would like to populate with a number of dots, each dot appearing in sequence, separated by 0.1 second
func setUpDots(numberOfDots: Int) {
for dots in 1...numberOfDots {
DispatchQueue.global(qos: .userInteractive).async {
DispatchQueue.main.async {
self.setLabelToDots(numberOfDots: dots)
}
usleep(100000) // wait 0.1 sec between showing each dot
}
}
}
func setLabelToDots(numberOfDots: Int) {
let dots = Array( repeating: ".", count: numberOfDots).joined()
myLabel.text = dots
myLabel.setNeedsDisplay()
}
But all the dots appear on the label at once
What should I do to get the right effect of the dots showing up with the specified delay between them?
Thanks for your feedback.

Answer 1

Basically, your for-loop is doing something similar to...
for dots in 1...numberOfDots {
self.setLabelToDots(numberOfDots: dots)
}
This is because each task is been allowed to execute at the same and the delay is having no effect on when the next one will run.
You "could" use a serial queue or you could use dependent operation queue, but a simpler solution might be to just use a Timer
This will allow you to setup a "delay" between ticks and treat the timer as a kind of pseudo loop, for example
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var myLabel: UILabel!
let numberOfDots = 10
var dots = 0
var timer: Timer?
override func viewDidLoad() {
super.viewDidLoad()
myLabel.text = ""
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
guard timer == nil else {
return
}
timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(tick), userInfo: nil, repeats: true)
}
#objc func tick() {
dots += 1
guard dots <= numberOfDots else {
timer?.invalidate()
timer = nil
dots = 0
return
}
numberOfDots(dots)
}
func numberOfDots(_ numberOfDots: Int) {
// You could just use string consternation instead,
// which would probably be quicker
let dots = Array( repeating: ".", count: numberOfDots).joined()
myLabel.text = dots
myLabel.setNeedsDisplay()
}
}
There are plenty of other examples about, but you should also have a look at the documentation for Timer