Aufruf einer Funktion als Variable in Javascript

Question

Nach document.ready definiere ich mehrere Funktionen und versuche dann, sie mit dem Fenster [Variable] aufzurufen, wobei die Variable der Name der Funktion ist. Ich bin auf diese Version hier gestoßen: Calling a JavaScript function named in a variable. Hier ist mein Code:

jQuery(document).ready(function() { 


function playSlide0(){ 
    player0.playVideo(); 
    console.log('slide0 fired'); 
} 
function playSlide1(){ 
    player1.playVideo(); 
    console.log('slide1 fired'); 
} 
function playSlide2(){ 
    player2.playVideo(); 
    console.log('slide2 fired'); 
} 

swiper.on('slideChangeStart', function() { 


    var currentSlide = swiper.activeIndex; 
    var currentVid = document.getElementById('video'+currentSlide); 
    var currentVidId = 'slide_'+currentSlide; 
    var playSlideFunction = 'playSlide'+currentSlide; 

    window[playSlideFunction](); 

}); 

}); 

Statt meine Funktion aufzurufen, erhalte ich die Fehlermeldung ‚Fenster [playSlideFunction] ist keine Funktion‘. Irgendwelche Gedanken? Vielen Dank.

Answer 1

Sie könnten die Funktion in einem Objekt wickeln

var fn = { 
    playSlide0: function() { 
     player0.playVideo(); 
     console.log('slide0 fired'); 
    }, 
    playSlide1: function() { 
     player1.playVideo(); 
     console.log('slide1 fired'); 
    }, 
    playSlide2: function() { 
     player2.playVideo(); 
     console.log('slide2 fired'); 
    } 
} 

und nennen Sie es mit dem Namen

fn['playSlide' + currentSlide](); 

Answer 2

Innen document.ready der Wert this nicht das Fenster, aber die document

jQuery(document).ready(function() { 
 
    console.log(document === this); // true 
 
    console.log(window === this); // false 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Deshalb ist window[playSlideFunction] nicht definiert.
Der richtige Weg, dies zu umgehen, mit einem Objekt sein würden Sie kontrollieren, und nicht die document oder window

jQuery(document).ready(function() { 
    var funcs = { 
    playSlide0: function() { 
     player0.playVideo(); 
     console.log('slide0 fired'); 
    }, 
    playSlide1: function() { 
     player1.playVideo(); 
     console.log('slide1 fired'); 
    }, 
    playSlide2: function() { 
     player2.playVideo(); 
     console.log('slide2 fired'); 
    } 
    } 

    swiper.on('slideChangeStart', function() { 
    var currentSlide = swiper.activeIndex; 
    var currentVid = document.getElementById('video' + currentSlide); 
    var currentVidId = 'slide_' + currentSlide; 
    var playSlideFunction = 'playSlide' + currentSlide; 

    funcs[playSlideFunction](); 
    }); 
}); 

Answer 3

Da dies eindeutig ein xyproblem, ich werde den Code korrigieren statt:

jQuery(document).ready(function() { 
    swiper.on('slideChangeStart', function() { 
     var i = swiper.activeIndex; 
     jQuery("#swiper video").get()[i].playVideo(); 
     console.log('slide ' + i + ' fired'); 
    }); 
}); 

Dies setzt voraus, dass der Swiper id="swiper" hat undElemente enthält.

Answer 4

Im Allgemeinen ist dies kein guter Weg, dies zu tun. Es ist schwer, eine wirklich spezifische Antwort zu geben, weil wir nicht den Rest Ihrer Seite haben, aber im Allgemeinen sind Sie besser dran mit einer einzigen Funktion, die einen Parameter benötigt, der angibt, auf welcher Sache Sie arbeiten sollen. Dies ist das Grundprinzip, das DRY genannt wird - Wiederhole dich nicht.

Man könnte so etwas tun:

Sagen Sie eine Reihe von Video-Elemente haben - Sie sie alle mit greifen:

var players = document.querySelectorAll('video'); 

nun eine Liste der Spieler ist Spieler - Sie verweisen können jeder Spieler, um mit:

players[0] //etc 

Jetzt müssen Sie nur eine Funktion, unabhängig davon, wie viele Spieler Sie haben:

Und man kann es mit so etwas wie folgt verwenden:

var currentSlide = swiper.activeIndex 
playSlide(currentSlide) 

Nun, wenn Sie mehr Spieler hinzufügen, brauchen Sie nicht, Ihren Code zu ändern, und wenn Sie etwas wollen, in den Code ändern, Sie müssen es nur an einem Ort ändern.