javascript - TweenJS 不尊重实例？

Question

情况

我需要循环遍历一个数组，并根据每个项目的值运行补间。因此，对于数组中的每个项目，必须有一个单独的 Tween 实例。根据TweenJS documentation ，get() 方法“返回一个新的补间实例”。

问题

在 for 循环内为数组中的每个项目运行新的补间时，看起来好像只有一个实例

代码

HTML

<div id='log'></div>

Javascript

var items = [3,6,2,8,9,6];
var log = document.getElementById('log');

for(var i = 0; i < items.length; i++){
    var item = items[i];

    var start = {
        x: item * 10,
        y: item * 15
    };

    var end = {
        x: item * 10,
        y: item * 30
    };

    createjs.Tween
        .get(start, {
            onChange: function () {
                log.innerHTML = log.innerHTML + i + " - " +  JSON.stringify(start) + "<br/>";
            }
        })
        .to(end, 1000)
};

演示

http://codepen.io/anon/pen/pilAL - 注意输出。开头的数字是当前数组值的索引。它只显示最后一项。

理想情况下...

理想情况下，数组中的每个项目都会在其值之间单独进行补间。

提前致谢!

Answer 1

快速而肮脏的解决方案是在 onChange 中使用“event”参数，并检查其 target.target 属性。

诀窍在于它可以正确触发所有内容，但变量作用域使得 i 和 start 不再包含您在事件方法触发时寻求的值。

这是经过更改的:http://codepen.io/anon/pen/FhsHz

是的，正如我所料，它来自词法范围问题...我必须重新审视它，因为我已经有一段时间不得不以这种方式处理 Javascript了(因此担心它) !)

通读本指南，它非常有洞察力，并在“在循环中创建闭包”小节中开始解决您的问题以及解决该问题的方法:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

要点是，如果您希望创建的匿名函数使用创建函数时捕获的值，则必须将最终使用的变量的作用域设置为它实际指向的状态所需的值。

这很烦人，他们确实应该为您提供比“event.target.target”更直观的参数作为获取您寻求的值(value)的地方，但替代方案是做一些像他们在这个中所做的事情示例并本质上创建一个函数生成函数，并将变量传递到其中。此时，函数使用的变量的范围将成为“生成函数”中传入参数的范围，并且它将指向正确的值。太棒了。