String letter by letter animation get mixed up when retrieving the next text - ios

Question

I have a pop up that is supposed to show the user instructions with letter by letter animation. The problem is whenever the user clicks "next" the letters get mixed up with the previous text.
The animation code:
extension UILabel {
func animate(newText: String, characterDelay: TimeInterval) {
DispatchQueue.main.async {
self.text = ""
for (index, character) in newText.enumerated() {
DispatchQueue.main.asyncAfter(deadline: .now() + characterDelay * Double(index)) {
self.text?.append(character)
}
}
}
}
The button action/calling method (as you can see I tried to empty the variable each time the user clicks "next" but it didn't work out)
#IBAction func nextbtt(_ sender: Any) {
var instructions = ["text"]
counter = counter + 1
var w1 = " لكن الوصول إليه يتطلب مواجهة وحل تحديات مختلفة"
var w2 = "هل بإمكانك مساعدتي في الحصول على الكنز؟"
let userId = UserDefaults.standard.object(forKey: "userId") as? String
ref = Database.database().reference()
let userLang = ref.child("users").child(userId!).child("lang")
userLang.observeSingleEvent(of: .value, with: { (snapshot) in
let lang = snapshot.value as? Int
if(lang==1){
////////////// if user's langague is English
w1 = "But finding it requires confronting and solving different challenges"
w2 = " Could you help me in getting the treasure" }
instructions.append(w1)
instructions.append(w2)
if(self.intrCounter < 3){
self.mytext.text = ""
var new = instructions[self.intrCounter]
self.mytext.text = new
self.mytext.animate(newText: new ?? "May the source be with you", characterDelay: 0.1)
self.intrCounter = self.intrCounter + 1
if(self.intrCounter == 3){
if(lang==1){
(sender as AnyObject).setBackgroundImage(UIImage(named: "engready"), for: UIControl.State.normal)
}
else {
(sender as AnyObject).setBackgroundImage(UIImage(named: "ready"), for: UIControl.State.normal)}
}
}
else{
}
})
if ( counter == 4){
status[0] = true
popUp.removeFromSuperview()
}
}
Screenshots:
one: text is showing to the user, user clicks "next" at the middle of the animation
two: when user clicks next before text 1 is complete
Code:

Answer 1

The issue occurs because you are calling an asynchronous block for each character and probably each char takes another amount of time.
Just to test this try this change, if it will help change the code accordingly :
var someCounter = 1
extension UILabel {
func animate(newText: String, characterDelay: TimeInterval) {
DispatchQueue.main.async {
self.text = ""
for (index, character) in newText.enumerated() {
someCounter += 1
DispatchQueue.main.asyncAfter(deadline: .now() +
someCounter + characterDelay * Double(index)) {
self.text?.append(character)
}
}
}
}
Let me know if this is indeed the issue, if so I will upload a more optimised code.