✅ – Pink Hat – 00-54 Feb 15

in this code

this.pattern = [
    {
        method: new Function(`console.log(1)`),
        bulletDelay: 1000    
    } ,{
        method: new Function(`console.log(2)`),
        bulletDelay: 1000
        
    } ,{
        method: new Function(`console.log(3)`),
        bulletDelay: 1000
        
    }  
]

for (this.i in this.pattern) {

    setTimeout(()=>this.pattern[this.i].method(), function (i){
        this.z = 0;
        for (this.j = i-1; this.j >=0; this.j--) {
            try {
            this.z += this.pattern[this.j]?.bulletDelay
            } catch (error) {
                console.error(error)
            } finally {
                continue
            }
        }
        console.log(i)
        return this.z
        
    }(this.i))
    console.log(this.pattern[this.i])
    
}

this.pattern = [
    {
        method: new Function(`console.log(1)`),
        bulletDelay: 1000    
    } ,{
        method: new Function(`console.log(2)`),
        bulletDelay: 1000
        
    } ,{
        method: new Function(`console.log(3)`),
        bulletDelay: 1000
        
    }  
]

for (this.i in this.pattern) {

    setTimeout(()=>this.pattern[this.i].method(), function (i){
        this.z = 0;
        for (this.j = i-1; this.j >=0; this.j--) {
            try {
            this.z += this.pattern[this.j]?.bulletDelay
            } catch (error) {
                console.error(error)
            } finally {
                continue
            }
        }
        console.log(i)
        return this.z
        
    }(this.i))
    console.log(this.pattern[this.i])
    
}

why does this.pattern[2] get printed 3 times?

> 0
> {bulletDelay: 1000, method: ƒ}
> 1
> {bulletDelay: 1000, method: ƒ}
> 2
> {bulletDelay: 1000, method: ƒ}
> undefined
> 3
> 3
> 3

> 0
> {bulletDelay: 1000, method: ƒ}
> 1
> {bulletDelay: 1000, method: ƒ}
> 2
> {bulletDelay: 1000, method: ƒ}
> undefined
> 3
> 3
> 3

When it should be printing

> 0
> {bulletDelay: 1000, method: ƒ}
> 1
> {bulletDelay: 1000, method: ƒ}
> 2
> {bulletDelay: 1000, method: ƒ}
> undefined
> 1
> 2
> 3

> 0
> {bulletDelay: 1000, method: ƒ}
> 1
> {bulletDelay: 1000, method: ƒ}
> 2
> {bulletDelay: 1000, method: ƒ}
> undefined
> 1
> 2
> 3

46 Replies

ScriptyChris•2y ago

Try caching this.j as a local variable

Pink Hat•2y ago

caching it?

ScriptyChris•2y ago

Yes, similarly as you do with i regarding this.i

Pink Hat•2y ago

like this?

for (this.i in this.pattern) {

    setTimeout(()=>this.pattern[this.i].method(), function (i, j){
        this.z = 0;
        for (j >=0; j--) {
            try {
            this.z += this.pattern[j]?.bulletDelay
            } catch (error) {
                console.error(error)
            } finally {
                continue
            }
        }
        console.log(i)
        return this.z
        
    }(this.i, 0))
    console.log(this.pattern[this.i])
    
}

for (this.i in this.pattern) {

    setTimeout(()=>this.pattern[this.i].method(), function (i, j){
        this.z = 0;
        for (j >=0; j--) {
            try {
            this.z += this.pattern[j]?.bulletDelay
            } catch (error) {
                console.error(error)
            } finally {
                continue
            }
        }
        console.log(i)
        return this.z
        
    }(this.i, 0))
    console.log(this.pattern[this.i])
    
}

ScriptyChris•2y ago

}(this.i, 0)) -> }(this.i, this.j))

Pink Hat•2y ago

nothing still the same result

ScriptyChris•2y ago

Can you add labels to console.log so it's more readable, which log refers to what value?

Pink Hat•2y ago

sure

ScriptyChris•2y ago

console.log('i:', i)

console.log('this.pattern[this.i]:',this.pattern[this.i])

console.log('i:', i)

console.log('this.pattern[this.i]:',this.pattern[this.i])

And show output

Pink Hat•2y ago

ScriptyChris•2y ago

Where's that "3" log coming from? Add it label too

Pink Hat•2y ago

the 3 is the label it was originally this

Pink Hat•2y ago

Pink Hat•2y ago

then so I could run it in chrome

this.pattern = [
    {
        method: new Function(`console.log(1)`),
        bulletDelay: 1000    
    } ,{
        method: new Function(`console.log(2)`),
        bulletDelay: 1000
        
    } ,{
        method: new Function(`console.log(3)`),
        bulletDelay: 1000
        
    }  
]

this.pattern = [
    {
        method: new Function(`console.log(1)`),
        bulletDelay: 1000    
    } ,{
        method: new Function(`console.log(2)`),
        bulletDelay: 1000
        
    } ,{
        method: new Function(`console.log(3)`),
        bulletDelay: 1000
        
    }  
]

Its a result of this.pattern[2] being run 3 times I think it's happening because this.i is already fully changed before the setTimeout occurs

ScriptyChris•2y ago

Can you add counters to pattern too?

this.pattern = [
    {
        method: new Function(`console.log(1)`),
        bulletDelay: 1000    ,
        counter: 1,
    } ,{
        method: new Function(`console.log(2)`),
        bulletDelay: 1000,
      counter: 2, 
    } ,{
        method: new Function(`console.log(3)`),
        bulletDelay: 1000,
      counter: 3,
    }  
]

this.pattern = [
    {
        method: new Function(`console.log(1)`),
        bulletDelay: 1000    ,
        counter: 1,
    } ,{
        method: new Function(`console.log(2)`),
        bulletDelay: 1000,
      counter: 2, 
    } ,{
        method: new Function(`console.log(3)`),
        bulletDelay: 1000,
      counter: 3,
    }  
]

Show the console output - i suppose each pattern will have counter: 3 Yes You could await timeout call