CODEWITHSUNDEEP
javascript
Ben H
Ben H

Reputation: 512

Javascript: Store last value and increment by 1 on next call

I have an animation built in Hype 3. I have multiple scenes and at the end of each scene I have a function called. This function has an array of scene names and is used to navigate to the next scene based on the array. I have this working for the first navigation, however, I am unsure how to then go to the next item in the array when the function is next called.

As you can see below, I have an array of two items. When the function is called it navigates to the first item County1. When the function is next called it should navigate to County3.

At the end of the animation, I will need to run a function that will reset the position as it will loop continuously.

Current Function:

function nextScene() {
     var activeCounties = ['County1', 'County3'];
     hypeDocument.showSceneNamed(activeCounties[0]);
     console.log(activeCounties[0]);
}

Upvotes: 2

Views: 1118

Answers (4)

Andrew Bone
Andrew Bone

Reputation: 7291

Just to be different I thought I'd show you how to manage it with a class which we'll call SceneManager

class SceneManager {
  constructor() {
    this.activeCountries = ['County1', 'County3'];
    this.index = 0;
  }
  nextScene() {
    let activeCountry = this.activeCountries[this.index];
    this.index = (this.index + 1) % this.activeCountries.length;
    return activeCountry;
  }
}

const sm = new SceneManager();

//hypeDocument.showSceneNamed(sm.nextScene())

console.log(sm.nextScene()) // County1
console.log(sm.nextScene()) // County3
console.log(sm.nextScene()) // County1

In the constructor, we make a note of the index, 0, and make an activeCountries array. Then within that, we have a function, nextScene(), that will return the active country and also move the index along the array list.

Upvotes: 0

mishu
mishu

Reputation: 5397

This sounds to me like almost the definition of generator functions. It's basically the only way that is like "pausing" the execution of a function and resuming it later. So, without using variables from another scope (like a global variable plainly called i), you can do something like:

function* nextScene() {
  var activeCounties = ['County1', 'County3'];
  //hypeDocument.showSceneNamed(activeCounties[0]);
  var index = 0;
  while (true) {
    yield activeCounties[index];
    index++;
    if (index == activeCounties.length) {
      index = 0;
    }
  }
}

generateScene = nextScene();

console.log(generateScene.next().value);
console.log(generateScene.next().value);
console.log(generateScene.next().value);
console.log(generateScene.next().value);
console.log(generateScene.next().value);

You can see a demo here. Note the asterisk after the function keyword. You can also read more about it here.

Also a video I liked, that explains this in the context of a simple game, can be found here.

Upvotes: 0

qiAlex
qiAlex

Reputation: 4346

We can create a function with it's own scope and add property index into this scope, to track witch scene should be operated

Try this

var nextScene = (function() {
    var index = 0;

    return function () {
     var activeCounties = ['County1', 'County3'];
     // hypeDocument.showSceneNamed(activeCounties[index]);
     console.log(activeCounties[index]);

     // index++ // simpliest way to manage index
     index = index + 1 === activeCounties.length ? 0 : index + 1 // circle. if index is grather than activeCounties.length than index = 0
    }
})();


nextScene() // County1
nextScene() // County3
nextScene() // County1

Upvotes: 1

Nick Parsons
Nick Parsons

Reputation: 50759

Use a global incrementer variable (i) to specify which index to point to in the array. Then when you call the function each time, increment this counter.

Here I have also included % activeCounties.length to bring the scene count back to zero once all scenes have been shown (allowing you to loop continuously):

var i = 0;
function nextScene() {
     var activeCounties = ['County1', 'County3'];
     //hypeDocument.showSceneNamed(activeCounties[0]);
     console.log(activeCounties[i]);
     
     i = (i + 1) % activeCounties.length;
}

nextScene();
nextScene();
// Modulus brings us back to zero if all scenes reached:
nextScene();

Upvotes: 0

Related Questions