# Class function looping/setInterval issues

**URL:** <https://discourse.processing.org/t/class-function-looping-setinterval-issues/8644>\
**Category:** Coding Questions\
**Created:** [February 22, 2019, 7:13pm UTC](https://discourse.processing.org/t/class-function-looping-setinterval-issues/8644 "2019-02-22T19:13:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Maximos118](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/maximos118/32/3811_2.png) [@Maximos118](https://discourse.processing.org/u/Maximos118)\
**Post date:** [February 22, 2019, 7:13pm UTC](https://discourse.processing.org/t/class-function-looping-setinterval-issues/8644/1 "2019-02-22T19:13:43Z")

</div>

Ok, I’m trying to do something rather tricky here in p5.

Take a look at my shudder class inside my Trees class:

function draw() {  
background(0, 111, 10);  
trees.trunk();  
trees.leaves();  
trees.shudder();  
}

class Trees {  
constructor(x, y) {  
this.x = x,  
this.y = y,  
this.l = this.x - 2,  
this.r = this.y + 2,  
this.a = 0  
}  
trunk() {  
noStroke();  
fill(126, 60, 1);  
rect(this.x + 3, this.y, 14, 40);  
triangle(this.x + 10, this.y + 30, this.x - 4, this.y + 40, this.x + 24, this.y + 40);  
}  
leaves() {  
fill(71, 215, 45);  
ellipse(this.x + 3, this.y - 5, 25);  
ellipse(this.x + 10, this.y - 15, 25);  
ellipse(this.x + 17, this.y - 5, 25);  
}  
shudder() {  
let d = dist(mouseX, mouseY, this.x, this.y);  
if (d \< 50) {  
this.a = 4;  
if (this.x \< this.l || this.x \> this.r) {  
this.a = this.a \* -1;  
}  
} else {  
this.a = 0;  
}  
this.x = this.x + this.a;  
}  
}

As you can see I’m making this tree shudder back and forth when I click on it which is working! However, I’m trying to simulate it shaking as if it’s being stuck with an axe three times. i.e I’d like it to start juddering half a second, then stop, start, stop, start and then permanently stop.

I’ve tried my best as you can see here:

shudder() {  
let d = dist(mouseX, mouseY, this.x, this.y);  
let counter = 0;  
if (d \< 50) {  
const intervals = setInterval(function() {  
counter++;  
this.a = 4;  
console.log(counter);  
if (this.x \< this.l || this.x \> this.r) {  
this.a = this.a \* -1;  
}  
if (counter === 3) {  
clearInterval(intervals)  
}  
}, 1000)  
} else {  
this.a = 0;  
}  
this.x = this.x + this.a;  
}

But no dice. I get this in the console:

 ![14%20pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9f0506bca59afa76f883688ef98ddd6151bb71f6.png)

I realise it might be the fact that the class is called inside a loop might be screwing it up.  
the counter is just so I can see what’s going on inside the setInterval function.  
Do I have to make another function and call it in a non-looping function to make setInterval work nicely?

I should mention I’m using the p5 Library but I don’t think it would affect this too much apart from the mouseX and mouseY pre-defined functions.

Can anybody solve this puzzle?

Many Thanks!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 22, 2019, 7:20pm UTC](https://discourse.processing.org/t/class-function-looping-setinterval-issues/8644/2 "2019-02-22T19:20:16Z")

</div>

> **[Gentle explanation of this keyword in JavaScript](https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/)**
>
> A gentle explanation how this keyword works in JavaScript. Listed and explained the invocation types - the key to understanding this. Examples and demos.

---

<div class="post-metadata">

**Author:** ![Maximos118](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/maximos118/32/3811_2.png) [@Maximos118](https://discourse.processing.org/u/Maximos118)\
**Post date:** [February 22, 2019, 7:21pm UTC](https://discourse.processing.org/t/class-function-looping-setinterval-issues/8644/3 "2019-02-22T19:21:35Z")

</div>

Am I not using this. correctly? You mean This.a?

I have corrected to the following:

shudder() {  
let d = dist(mouseX, mouseY, this.x, this.y);  
let speed = 0;  
if (d \< 50) {  
speed = 4;  
if (this.x \< this.l || this.x \> this.r) {  
speed = speed \* -1;  
}  
} else {  
speed = 0;  
}  
this.x = this.x + speed;  
}

But Still that doesn’t solve my problem 😕

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 22, 2019, 7:35pm UTC](https://discourse.processing.org/t/class-function-looping-setinterval-issues/8644/4 "2019-02-22T19:35:12Z")

</div>

> [@Maximos118](#):
>
> Am I not using `this` correctly?

```javascript
const intervals = setInterval(function () {
  counter++;
  this.a = 4; // <- The this keyword here isn't of datatype Trees!
  // ...

```

The `function` arg passed to **setInterval()** has its _this_ either `undefined` or the same as _window_. 😨

Passing a fat arrow `=>` lambda instead would lock its _this_ to the same current context as method Trees::**shudder()** though: 💡

> **[Arrow function expressions - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)**
>
> An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:

```javascript
shudder() {
  const d = dist(mouseX, mouseY, this.x, this.y);
  let counter = 0;
  if (d < 50) {
    const intervals = setInterval(() => {
      ++counter;
      this.a = 4; // <- The this keyword here is now of datatype Trees!
      // ...

```

---

<div class="post-metadata">

**Author:** ![Maximos118](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/maximos118/32/3811_2.png) [@Maximos118](https://discourse.processing.org/u/Maximos118)\
**Post date:** [February 22, 2019, 7:38pm UTC](https://discourse.processing.org/t/class-function-looping-setinterval-issues/8644/5 "2019-02-22T19:38:41Z")

</div>

I had put this.a = 0; in the constructor so I just assumed it was working like any other variable.  
Would my attempt at coding this work if I switched to the speed variable I just created?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 22, 2019, 7:44pm UTC](https://discourse.processing.org/t/class-function-looping-setinterval-issues/8644/6 "2019-02-22T19:44:34Z")

</div>

Sorry, I don’t have time to deep study your code now.  
I was just pointing out a famous common JS `this` bug.

> [@Maximos118](#):
>
> I had put this.a = 0; in the constructor so I just assumed it was working like any other variable.

_this.a_ isn’t a variable but a property of class Trees.  
At least as long as we make sure that `this` points out to the current Trees reference whenever we call a Trees method.

---

<div class="post-metadata">

**Author:** ![Maximos118](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/maximos118/32/3811_2.png) [@Maximos118](https://discourse.processing.org/u/Maximos118)\
**Post date:** [February 22, 2019, 7:57pm UTC](https://discourse.processing.org/t/class-function-looping-setinterval-issues/8644/7 "2019-02-22T19:57:20Z")

</div>

😮 This is sort of working!

```auto
shudder() {
    let d = dist(mouseX, mouseY, this.x, this.y);
    let counter = 0;
    let speed = 0;
    if (d < 50) {
      let interval = setInterval(() => {
        speed = 4;
        counter++;
        console.log(counter);
        if (this.x < this.l || this.x > this.r) {
          speed = speed * -1;
        }
        if (counter === 3) {
          clearInterval(interval)
        }
      }, 1000)
    } else {
      speed = 0;
    }
    this.x = this.x + speed;
  }

```

Conole.log works if I click inside my mouseX, mouseY radius and click out again. If I leave it toggled on though it just does that weird thing in the picture I showed you.

The animation has stopped now though. Any ideas why?