Js 函数总是返回相同的值

Question

Js beginner here.

I have a function like this:

generateSteps: function() {
            var stepsLength = this.data.steps.length;
            var dataStepsInit = this.data.steps;
            for (var i = 0; i < stepsLength; i++) {
                var stepsItem = dataStepsInit[i].ITEM;
                var arrayItem = this.animationNodes[stepsItem - 1];
                var transition = this.animationParameters[i].transition;
                var options = this.animationParameters[i].options;
                var speed = this.animationParameters[i].speed;
                var delay = this.animationParameters[i].delay;
                arrayItem.delay(delay).show(transition, options, speed);

                if (dataStepsInit[i].AUDIOID) {
                    var audioClass = dataStepsInit[i].AUDIOID;
                    var audioPlayer = this.template.find("audio." + audioClass);

                    setTimeout(playAudioOnDelay,delay);
                };

                var playAudioOnDelay = function() {
                    audioPlayer[0].pause();
                    audioPlayer[0].currentTime = 0;
                    audioPlayer[0].play();
                };

            }
        }

What it does is generate data from JSON and display animated elements one by one on delay. Animation part work fine. I can assign required animations and delay to DOM elements and show them in right order.

But what I want to do in the same time is also to play an audio on delay (so I use setTimeout). Everything is almost fine, I play audio in right time (correct delay value) but I always play the same audio (which is last element) because audioPlayer always is the same DOM node.

I think this have something to do with this or I mixed a scope?

Answer 1

Try this:

generateSteps: function() {
        var stepsLength = this.data.steps.length;
        var dataStepsInit = this.data.steps;
        for (var i = 0; i < stepsLength; i++) {
            var stepsItem = dataStepsInit[i].ITEM;
            var arrayItem = this.animationNodes[stepsItem - 1];
            var transition = this.animationParameters[i].transition;
            var options = this.animationParameters[i].options;
            var speed = this.animationParameters[i].speed;
            var delay = this.animationParameters[i].delay;
            arrayItem.delay(delay).show(transition, options, speed);

            if (dataStepsInit[i].AUDIOID) {
                var audioClass = dataStepsInit[i].AUDIOID;
                var audioPlayer = this.template.find("audio." + audioClass);

                setTimeout(playAudioOnDelay(audioPlayer),delay);
            };

        }

        function playAudioOnDelay(audioPlayer){
            return function(){
                audioPlayer[0].pause();
                audioPlayer[0].currentTime = 0;
                audioPlayer[0].play();
            }
        }
 }

Essentially, your problem looks like this: http://jsfiddle.net/po0rLnwo/

The solution is : http://jsfiddle.net/gpfuo1s8/

Check the console in your browser.