✅ – 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
S
ScriptyChris•440d ago
Try caching this.j as a local variable
PH
Pink Hat•440d ago
caching it?
S
ScriptyChris•440d ago
Yes, similarly as you do with i regarding this.i
PH
Pink Hat•440d 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])
    
}
S
ScriptyChris•440d ago
}(this.i, 0)) -> }(this.i, this.j))
PH
Pink Hat•440d ago
nothing still the same result
S
ScriptyChris•440d ago
Can you add labels to console.log so it's more readable, which log refers to what value?
PH
Pink Hat•440d ago
sure
S
ScriptyChris•440d 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
PH
Pink Hat•440d ago
S
ScriptyChris•440d ago
Where's that "3" log coming from? Add it label too
PH
Pink Hat•440d ago
the 3 is the label it was originally this
PH
Pink Hat•440d ago
PH
Pink Hat•440d 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
S
ScriptyChris•440d 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
PH
Pink Hat•440d ago
in the for function?
S
ScriptyChris•440d ago
for (this.i in this.pattern) {

    await new Promise(resolve => setTimeout(()=>this.pattern[this.i].method(), function (i, j){
      // stuff

      // `return this.z` becomes
      resolve(this.z)
    }(this.i, 0))
    console.log(this.pattern[this.i])   
}
for (this.i in this.pattern) {

    await new Promise(resolve => setTimeout(()=>this.pattern[this.i].method(), function (i, j){
      // stuff

      // `return this.z` becomes
      resolve(this.z)
    }(this.i, 0))
    console.log(this.pattern[this.i])   
}
PH
Pink Hat•440d ago
would that work?
S
ScriptyChris•440d ago
It should
PH
Pink Hat•440d ago
ok. I'll try it
S
ScriptyChris•440d ago
If this for..in is inside a function, then you have to make it async If it's in top-level scope, then your script should work as a module, otherwise await won't work, and you have to .then() the promise
PH
Pink Hat•440d ago
and inside the .then you would put what exactly? because it seems the await doesnt have anything referencing it
S
ScriptyChris•440d ago
Your console.log
PH
Pink Hat•440d ago
ok.
S
ScriptyChris•440d ago
What do you mean?
PH
Pink Hat•440d ago
nvm that so
PH
Pink Hat•440d ago
PH
Pink Hat•440d ago
now it's worse it doesnt even wait the time it needs to
S
ScriptyChris•440d ago
No, you have to wrap console.log inside a function, which you pass to .then() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#using_the_then_method .then(), same as setTimeout() or Promise() expects a function to be passed, which is then called inside
PH
Pink Hat•440d ago
huh? what do u mean by this im confused as hell
S
ScriptyChris•440d ago
Read example in the docs
S
ScriptyChris•440d ago
Passing a function
S
ScriptyChris•440d ago
.then((value) => console.log( /* stuff */ ))
PH
Pink Hat•440d ago
I want the promise to pass after a certain time. if I do 
new Promise(resolve).then(() => console.log(/* stuff */)
new Promise(resolve).then(() => console.log(/* stuff */)
then what does that do
S
ScriptyChris•440d ago
What resolve is there? I already wrote you example with promisified setTimeout above ..ok, try this - i think i misread your code (2:30am on my side) 
    await new Promise(
      (resolve) => {
        setTimeout(
          () => {
            this.pattern[this.i].method();
            resolve();
          }, 
          function (i, j){
            // stuff

            return this.z;
          }(this.i, 0)
        )
      }
    )
    console.log(this.pattern[this.i]) 
    await new Promise(
      (resolve) => {
        setTimeout(
          () => {
            this.pattern[this.i].method();
            resolve();
          }, 
          function (i, j){
            // stuff

            return this.z;
          }(this.i, 0)
        )
      }
    )
    console.log(this.pattern[this.i])
PH
Pink Hat•440d ago
threw this error (after I fixed some of the syntax cus it was complaining
S
ScriptyChris•440d ago
Lacking closing curly brace
S
ScriptyChris•440d ago
Add } there
S
ScriptyChris•440d ago
And the console.log('what') is incorrectly place there Just copy-paste this ☝️
S
ScriptyChris•440d ago
Works for me on dry-run
PH
Pink Hat•440d ago
it works
S
ScriptyChris•440d ago
👍
PH
Pink Hat•440d ago
I found a piece of code that works (slightly waltered from yours) 
this.pattern = [
    {
        method: new Function('console.log("Counter: 1")'),
        bulletDelay: 1000    
    } ,{
        method: new Function('console.log("Counter: 2")'),
        bulletDelay: 1000
        
    } ,{
        method: new Function('console.log("Counter: 3")'),
        bulletDelay: 1000
        
    }  
]

for (this.i in this.pattern) {
    await new Promise(
      (resolve) => {
        setTimeout(
          () => {
            this.pattern[this.i].method();
            resolve();
          }, 
          function (i, j){
            // stuff

            return this.z;
          }(this.i, 0)
    )
    console.log(this.pattern[this.i]) 
});
}
this.pattern = [
    {
        method: new Function('console.log("Counter: 1")'),
        bulletDelay: 1000    
    } ,{
        method: new Function('console.log("Counter: 2")'),
        bulletDelay: 1000
        
    } ,{
        method: new Function('console.log("Counter: 3")'),
        bulletDelay: 1000
        
    }  
]

for (this.i in this.pattern) {
    await new Promise(
      (resolve) => {
        setTimeout(
          () => {
            this.pattern[this.i].method();
            resolve();
          }, 
          function (i, j){
            // stuff

            return this.z;
          }(this.i, 0)
    )
    console.log(this.pattern[this.i]) 
});
}
and now we can close this. thanks for the help @ScriptyChris #thanks
S
ScriptyChris•440d ago
You may react to helpful answer with ✅ to mark thread as solved
UU
Unknown User•439d ago
More Posts
✅ – Pink Hat – 23-03 Feb 14What are the arguments in an arrow function when it is inside of a `setTimeout()` function ```js setPink Hat – 22-12 Feb 13why do I get this error with this code?How to prevent parent element onClick event when child element outside click event triggered?Hey, everybody, I am trying to build custom pop-ups and/or dropdowns using React, and I need your he⛄Snowberb⛄ – 07-57 Feb 9Having an interceptor do redirect to the login page when a certain status is seen, how could I do toEduardS – 18-34 Feb 8How to solve calling hooks conditionally here? I have this `data` coming from `validateData` that rHow to avoid calling hook conditionally here?I have this `data` coming from `validateData` that return the `rawData` if valid otherwise `null`. Endo – 07-14 Feb 8Does anyone know how to autoplay video with sound? I know there is a Autoplay policy. but for exampkairu – 14-23 Feb 7I have a section in my code I don't really understand. `function nameOfFunction(a, b = null, c =