Skip to main content
Inspiring
January 2, 2023
Answered

Why is there still a listener working in this code when it is (supposed) to be removed?

  • January 2, 2023
  • 1 reply
  • 194 views

Hi team,

Code is running in external class file for html5 canvas.

I cant work out what is going wrong here!  If I put the .off for the listeners in the update function (at the right setstate point) when we get to setstate 5 and 6 the button (btn_1) is still calling the function setstate3();

If I put the .off into the setstate functions (to remove the listener in the same function as it has been called) the button still functions at setstate 5 and 6 ..

And I have tried to put it into another function to setListeners depending on the state but still not killing the bt_1 at setstate 5 and 6.

no errors being thrown

 

class Game {
constructor (exportRoot, stage) {
    this.root = exportRoot
    this.stage = stage
    this.str1 = "start"
    this.strOp1 = "1"
    this.strOp2 = "2"
    this.init()
    this.setstate
    this.randomNumber
        
} 
    
    init () {
    const game = this
    this.main_Txt = this.root.main_Txt
    this.op_1 = this.root.op_1
    this.op_2 = this.root.op_2
    this.setstate = 0
    this.setListeners();
    
   
}; 
 setListeners(){
     if(this.setstate == 0){
     this.root.start_bt.on('click', function () { game.update() })
     this.root.btn_1.on('click', function () { game.setstate1() })     
     } else if (this.setstate == 1) {
     this.root.start_bt.off('click', function () { game.update() })
     this.root.btn_1.off('click', function () { game.setstate1() }) 
     this.root.btn_1.on('click', function () { game.setstate3() })       
     } else if (this.setstate == 5) {
       this.root.btn_1.off('click', function () { game.setstate3() })    
     } else if (this.setstate == 6) {
       this.root.btn_1.off('click', function () { game.setstate3() })    
     }
 }
 update () {
    if (this.setstate == 0) {
    this.str1 = 'You have had a really big weekend camping.  In fact as you are driving home through the dark forest you can hardly keep you eyes open.  The stereo is playing your favourite song but suddenly it cuts out.  There is a huge bright purple light in the sky and your car sputters to a stop.  The stereo is dead and all the lights are out.'
        this.strOp1 = 'Try to fix your car'
        this.strOp2 = 'Start walking'
        this.root.start_bt.visible = 0
        this.root.mc_2.visible = false
        
         //this.root.btn_2.on("click", function(){ game.setstate2(); })
    } else if (this.setstate == 1) {
       this.str1 = 'You get out and open the hood, its hard to see but there is still some purple glow in the sky.  You wonder what that big light came from and what is going on.  All of a sudden there is some moaning and some noises from the underbrush and a zombie stumbles out onto the road.'
        this.strOp1 = 'Fight the zombie'
        this.strOp2 = 'Ask him to help fix the car'
        this.root.mc_1.visible = false
        this.root.mc_2.visible = true
        this.root.btn_1.on('click', function() { game.setstate3() })
         //this.root.btn_2.on("click", function(){ game.setstate2(); }) 
    } else if (this.setstate == 5) {
        this.str1 = 'You try to fight but the zombie overpowers you and eats your brain.'
        this.strOp1 = "dead"
        this.strOp2 = "dead"
        this.root.mc_1.visible = false
        this.root.mc_2.visible = false
        
        //this.root.btn_2.on("click", function(){game.setstate2();  })
     } else if (this.setstate == 6) {
        this.str1 = "lost"
        this.strOp1 = "dead"
        this.strOp2 = "dead"
        this.root.mc_1.visible = false
        this.root.mc_2.visible = false
        
         //this.root.btn_2.on("click", function(){ game.setstate2(); }
             }
    this.setText();
}
    chooseNumber () {
	this.randomNumber = Math.floor(Math.random() * 10) + 1
}
    setText () {
    this.main_Txt.text = this.str1;
    this.op_1.text = this.strOp1;
    this.op_2.text = this.strOp2;
}
    setstate1 () {
    console.log('setstate1')
    this.setstate = 1
    this.setListeners();
    this.update();    
}
    setstate3 () {
        this.chooseNumber();
        if (this.randomNumber >= 5) {
    console.log('setstate5');
    this.setstate = 5;
    this.setListeners();
    this.update();   
         
    } else {
    console.log('setstate6');
    this.setstate = 6
    this.setListeners();
    this.update()  
    }    
  }
}

 

    This topic has been closed for replies.
    Correct answer kglad

    that's a work-around that generally will not work in most situations. eg, when you don't want to remove all.

     

    to remove a shortcut on() listener you have to use a closure to maintain scope. eg, 

     

    // add listener

    var btn_1_closure = this.root.btn_1.on('click', function() { game.setstate3() })

     

    // remove listener

    this.root.btn_1.off("click", btn_1_closure);

    1 reply

    Inspiring
    January 2, 2023

    I worked it out!!

     maybe the thing I needed to mention was easelJS

    there is a removeAllListeners commandhttps://createjs.com/docs/easeljs/files/createjs_events_EventDispatcher.js.html#l263

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    January 2, 2023

    that's a work-around that generally will not work in most situations. eg, when you don't want to remove all.

     

    to remove a shortcut on() listener you have to use a closure to maintain scope. eg, 

     

    // add listener

    var btn_1_closure = this.root.btn_1.on('click', function() { game.setstate3() })

     

    // remove listener

    this.root.btn_1.off("click", btn_1_closure);