J'essaie de créer une simple boucle de fonctions d'animation. J'ai stocké leurs noms dans un tableau et je peux déconnecter chaque objet sous forme de chaîne avec un événement de clic. Cependant, je n'arrive pas à appeler les fonctions correspondantes de cet événement

J'ai essayé de le faire mais j'obtiens une erreur nt [rt] n'est pas une fonction

arrAnimations[activeScene]()

J'ai essayé de nombreuses approches de débordement de pile à partir de questions similaires, telles que la création d'une fonction d'aide comme celle-ci

myFunction = function(){};   
var arrAnimations = {italy: myFunction};

arrAnimations['activeScene']();//executes the function

Et ça

var tmp = arrAnimations[activeScene]
window[tmp]

Voici le code:

var arrAnimations = [
  'italy',
  'czech',
  'russia'
]

var activeScene = 0;

document.getElementById('animate').addEventListener("click",
  function incNumber() {
      if (activeScene < arrAnimations.length - 1) {
          activeScene++;
      } else if (activeScene = arrAnimations.length - 1) {
          activeScene = 0;
      }
      // console.log(arrAnimations[activeScene])
  }
)

function italy() { console.log('italy') }

function czech() { console.log('czech') }

function russia() { console.log('russia') }
<div id="animate">Animate</div>
1
user3821345 26 janv. 2019 à 18:34

4 réponses

Meilleure réponse

Le tableau peut stocker les fonctions réelles elles-mêmes, au lieu des noms de fonction.

function italy()  { console.log('italy') }
function czech()  { console.log('czech') }
function russia() { console.log('russia') }

var arrAnimations = [ italy, czech, russia ]

Recherchez ensuite l'élément dans le tableau et appelez-le:

var activeScene = 0;
arrAnimations[activeScene]()

Démo dans les extraits de pile

function italy()  { console.log('italy') }
function czech()  { console.log('czech') }
function russia() { console.log('russia') }

var arrAnimations = [ italy, czech, russia ]

var index = 0;

function callNextFunction() {
    index = index >= arrAnimations.length - 1 ? 0 : index + 1
    
    arrAnimations[index]()
}

var btn = document.getElementById('animate')
btn.addEventListener("click", callNextFunction)
<button id="animate">Animate</button>
1
KyleMit 26 janv. 2019 à 15:59

Dans votre ligne commentée:

console.log(arrAnimations[activeScene])

Vous essayez d'appeler une méthode sur le tableau, qui n'existe pas. C'est un tableau de chaînes. Au lieu de cela, vous devez obtenir la valeur de chaîne, puis l'utiliser pour appeler une méthode dans la fenêtre.

window[arrAnimations[activeScene]]();

Cela dit, je simplifierais votre code et utiliserais les fonctions lambda, et j'éviterais quelques instructions if, essayez ceci:

<div id="animate">Animate</div>

<script>
    var arrAnimations = [
        () => console.log('italy'),
        () => console.log('czech'),
        () => console.log('russia')
    ]

    var activeScene = 0;

    document.getElementById('animate').addEventListener('click', () => {

        arrAnimations[activeScene]();

        activeScene++;
        activeScene = activeScene % arrAnimations.length;
    });
</script>
1
clint 26 janv. 2019 à 16:05

C'est ce que tu veux?

foo = () => console.log('foo')
bar = () => console.log('bar')
baz = () => console.log('baz')

fns = {
  foo,
  bar,
  baz
}

Object.keys(fns).forEach(fn => fns[fn]())

fns['foo']()
fns['bar']()

Remarque: vous ne pouvez pas convertir une chaîne en une fonction comme celle-ci, au moins en Javascript:

let fn = () => {}
let foo = 'fn'
foo()  // X
// foo is a string, not a function, It is just a coincidence that the content of the string is same with the function's name
0
Jacob 26 janv. 2019 à 15:53
italy = () => console.log('italy')
czech = () => console.log('czech')
russia = () => console.log('russia') 

Si tableau de fonctions:

let arrAnimationsAsFunctions = [ italy , czech , russia];
arrAnimationsAsFunctions.forEach(animation => animation())

Si Array of Strings:

let arrAnimationsAsStrings = [ 'italy' , 'czech' , 'russia' ];
arrAnimationsAsStrings.forEach(animation => eval(animation)())

Utilisez eval pour exécuter une chaîne en tant que JS code

1
Junaid aziz 11 févr. 2019 à 09:45