Передача переменной JavaScript в имя функции

Question

Я пытаюсь создать простой цикл анимационных функций. Я сохранил их имена в массиве и могу выйти из каждого объекта в виде строки с событием click. Однако я не могу назвать соответствующие функции этого события

Я пытался сделать это, но я получаю сообщение об ошибке nt [rt] не является функцией

arrAnimations[activeScene]()

Я перепробовал много подходов от переполнения стека от подобных вопросов, таких как создание вспомогательной функции, подобной этой

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

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

и это

var tmp = arrAnimations[activeScene]
window[tmp]

Вот код:

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>

Answer 1

italy = () => console.log('italy')
czech = () => console.log('czech')
russia = () => console.log('russia') 

если Массив функций:

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

если массив строк:

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

используйте eval для запуска строки в виде кода JS

Answer 2

В вашей закомментированной строке:

console.log(arrAnimations[activeScene])

Вы пытаетесь вызвать метод в массиве, который не существует.Это массив строк.Вместо этого вам нужно получить строковое значение, а затем использовать его для вызова метода в окне.

window[arrAnimations[activeScene]]();

Учитывая сказанное, я бы немного упростил ваш код и использовал бы лямбда-функции, а также избежал бы пары операторов if, попробуйте это:

<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>

Answer 3

Это то, что вы хотите?

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']()

Примечание: вы не можете привести строку к функции, подобной этой, по крайней мере в 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

Answer 4

В массиве могут храниться сами функции, а не имена функций.

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

var arrAnimations = [ italy, czech, russia ]

Затем найдите элемент в массиве и назовите его:

var activeScene = 0;
arrAnimations[activeScene]()

Демонстрация в фрагментах стека

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>