Js的函数总是返回相同的值

Js function always return the same values

本文关键字:返回 函数 Js      更新时间:2023-09-26

Js初学者。

我有一个这样的函数:

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();
                };
            }
        }

它所做的是从JSON生成数据,并延迟显示动画元素一个接一个。动画部分工作良好。我可以为DOM元素分配所需的动画和延迟,并以正确的顺序显示它们。

但我想做的是在同一时间也播放音频延迟(所以我使用setTimeout)。一切都很好,我在正确的时间播放音频(正确的延迟值),但我总是播放相同的音频(这是最后一个元素),因为audioPlayer总是相同的DOM节点。

我认为这与这个或我混合了一个作用域有关?

试试这个:

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();
            }
        }
 }

本质上,你的问题看起来像这样:http://jsfiddle.net/po0rLnwo/

解决方案是:http://jsfiddle.net/gpfuo1s8/

检查浏览器中的控制台