How to deactivate onTick method in Cesium

Question

I have Problem with onTick() method, I have two buttons for two different situations, in each one I will load separate dataSource, just like the czml.html example on Sandcastle. I have two different definition for onTick() method for each button seperately, to do some specific things when we reach at a specific time. In the reset method I am removing entities and dataSources of my viewer, but I cannot remove onTick method implementation.

When I am running my code, the default button is doing perfectly fine, but when I press other button, all those conditions that I mentioned for the first button is also happening at the same time, and it will not let my second onTick method to perform its job correctly. Do you know how I can deactivate the first onTick method?

Answer 1

Take a look at the addEventListener documentation, you'll find two different ways to undo the addition of an event listener: One is to call the matching removeEventListener, and the other is to save the return value from addEventListener and invoke it later.

Here's some code showing both ways. Use whichever option makes more sense for your code, but don't use both at once.

function onTickCallback(clock) {
    // ... do stuff with every tick ...
}

var unsubscribeTicks = viewer.clock.onTick.addEventListener(onTickCallback);

function unsubscribeOption1() {
    // One option is to call removeEventListener.  In this case, you
    // don't need to save "var unsubscribeTicks" at all, but you do
    // need a reference to the original onTickCallback.
    viewer.clock.onTick.removeEventListener(onTickCallback);
}

function unsubscribeOption2() {
    // The other option is to save the return value of addEventListener,
    // and later invoke it.  This could be a cleaner option if the
    // onTickCallback was declared anonymously inline.
    unsubscribeTicks();
}