Question

总而言之，我想用BJS闪烁对象材料，因此我创建了两个函数blink()和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);
}

所以我在JQuery Ready函数中调用了我的函数：

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

直到现在一切正常：)，我决定创建一个类并在其中实现我的函数（因为我想使用多态性重新定义blink()和stopBlink()函数）。

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);
  }
}

然后我在ready函数中创建一个新对象：


$(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;  
  }
);

问题是，当我单击按钮时，blink()功能正常，并且对象闪烁，但是当我再次单击以停止闪烁时，它继续闪烁！

我尝试在console.log(this.interval)中使用blink()，它给了我一个数字（11），但是当我在stopBlink()中对其进行操作时，它是未定义的！

Answer 1

您的点击处理程序未绑定到您的类的上下文。一个简单的解决方法是将它们绑定到构造函数中。因此，您正在this.interval内设置blink，但它仅存在于该函数的上下文中。通过将其绑定到类，this将引用类的上下文，而不是函数上下文。

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

在类函数中this.interval是未定义的

1 个答案: