this.interval is undefined inside a class function

Question

in summarize I want to blink an object material in BJS, so I create two functions blink() and stopBlink():

function blink(obj, delay, box) {
  var changeMaterial = function(obj, newMaterial) {
    {
      obj.material = newMaterial;
    }
  };
  oldMaterial = obj.material;
  interval = (function() {
    var Toggle = true;
    return setInterval(function() {
      if (Toggle) changeMaterial(obj, box);
      else {
        changeMaterial(obj, OriginalStairMaterial);
      }
      Toggle = !Toggle;
    }, delay);
  })();
}

function stopBlink(obj, duration) {
  setTimeout(function() {
    obj.material = oldMaterial;
    clearInterval(interval);
  }, duration);
}

So I called my function inside JQuery Ready function :

$(document).ready(function() {
    $("#btn1").click(function() {
        if(Toggle1)
             blink(stairMesh,100,boxMaterial[0]);
        else 
            stopBlink(stairMesh,500);
      Toggle1=!Toggle1;    
    }
);

until now everything works good :), I decided to creat a class and implement my functions inside it (because I want to use polymorphism to redefine blink() and stopBlink() functions).

class A {
  blink() {}
  stopBlink() {}
}
class B extends A {
  constructor(oldMaterial) {
    super();
    this.oldMaterial = oldMaterial;
    this.interval = null;
  }

  blink(obj, delay, box, duration) {
    var changeMaterial = function(obj, newMaterial) {
      {
        obj.material = newMaterial;
      }
    };

    //var oldMaterial=obj.material;

    this.interval = (function() {
      var Toggle = true;
      return setInterval(
        function() {
          if (Toggle) changeMaterial(obj, box);
          else {
            changeMaterial(obj, OriginalStairMaterial);
          }

          Toggle = !Toggle;
        },

        delay
      );
    })();

    console.log(this.interval);
  }

  stopBlink(obj, duration) {
    setTimeout(function() {
      obj.material = oldMaterial;
      console.log(this.interval);

      clearInterval(this.interval);
    }, duration);
  }
}

and I create a new object inside ready function:

$(document).ready(function() {
  var a = new B();
  $("#btn1").click(function() {
      if(Toggle1)
            a.blink(stairMesh,100,boxMaterial[0]);

      else 
        a.stopBlink(stairMesh,500);

    Toggle1=!Toggle1;  
  }
);

The problem is, when I click the button the blink() function works goos and my object blinks, but when I click again in order to stop blining it continues to blink!

I tried to console.log(this.interval) in blink(), it gives me a number (11), but when I console it in stopBlink() it is undefined!

Answer 1

Your click handlers are not being bound to the context of your class. An easy fix is to bind them inside your constructor. So, you're setting this.interval inside of blink but it only exists in the context of that function. By binding it to the class, this will refer to the context of the class, instead of the function context.

constructor(oldMaterial)
{
   super();
   this.oldMaterial=oldMaterial;
   this.interval=null;
   this.blink = this.blink.bind(this);
   this.stopBlink = this.stopBlink.bind(this);
}