0

I would like to check the value of a variable inside my requestAnimationFrame function. I implement this value on the scroll wheel event. It seems to work but when I check the value inside my RAF fonction, it's still set at its first value.

I wonder how can I properly set my this.deltaY value ? Thank you very much

class MyClass
{
    constructor ()
    {   
        this.deltaY = 0;
    }

    init ()
    {
        this.playRAF();
        window.addEventListener('wheel', function(e) {
            this.deltaY = e.deltaY;

            console.log(this.deltaY); 
            // it returns a number
        });

    }

    playRAF ()
    {
        this.leRaf = requestAnimationFrame(this.playRAF.bind(this));
        
        console.log(this.deltaY); 
        // it returns 0 all the time despite the function above :(
    }
}

//////

const foo = new MyClass();
foo.init();
Michaël
  • 489
  • 1
  • 5
  • 21
  • 2
    Use an arrow function here: `window.addEventListener('wheel', e => {}` – adiga Jun 22 '20 at 13:44
  • @adiga, thanks for your answer. Unfortunately, this issue is not related to what's inside my event listener but it's related on the value inside my playRAF function. Plus I don't want to use self since I will have several instances of my class. – Michaël Jun 22 '20 at 13:51
  • Your event listener is definetely an issue. Without an arrow function, it will not set `this.deltaY = e.deltaY` to the instance. Since you have a `this.playRAF()` outside, I'm assuming `init` is called on the instance of the class. – adiga Jun 22 '20 at 13:58
  • Also, you probably need to call `this.playRAF()` INSIDE the event listener if you want that called every time `wheel` event occurs. – adiga Jun 22 '20 at 14:02
  • Thanks for your answer. playRAF() is a request animation frame function. So it is called all the time as soon as it is first call it. Yes I call my init() function with my instance. Since I changed my addEventListener with the arrow, my console.log(this.deltaY) returns "undefined", it seems it's not accessible anymore. – Michaël Jun 22 '20 at 14:10
  • The accepted answer suggested exactly what I mentioned. What changed? – adiga Jun 22 '20 at 17:19
  • I had another function that blocked the previous fix. When I removed it your solution worked. Thanks for your help – Michaël Jun 23 '20 at 09:32

1 Answers1

1

This is an this issue

pay attention to this block, in the event listener callback, this is window, instead of the class instance as you thougt it is.

window.addEventListener('wheel', function(e) {
  this.deltaY = e.deltaY;

  console.log(this.deltaY); 
  // it returns a number
});

try to check the value window.deltaY, you will find that it's your logged number, or try a breakpoint debugging, the this in the function(e){} is Window object.

turn it into

window.addEventListener('wheel',(e) => {
  this.deltaY = e.deltaY;

  console.log(this.deltaY); 
  // it returns a number
});

will solve this problem, as the arrow will not create a function block, this will be the class instance as expected.

Oboo Cheng
  • 4,250
  • 3
  • 24
  • 29