JavaScript 函数仅在我第一次调用时才起作用？

Question

我想知道你们是否可以帮助我解决我遇到的问题。希望识别问题不需要您查看我正在使用的图形包的文档，但如果确实如此，请看这里:http://raphaeljs.com/reference.html#Element.transform 。

我有以下代码块

window.setInterval(function()
{
    mycirc.transform("t1,1");
}, 500);

当然应该每半秒调用一次函数mycirc.transform("t1,1")。该函数应该将 mycirc 的 x 和 y 坐标各平移 1 个单位(查看 http://raphaeljs.com/reference.html#Element.transform 上的 Element.transform([tstr]) )。

但是，当我测试我的页面时，mycirc 被翻译一次，然后后续调用没有任何效果。我使用 console.log(...) 来测试并确保:

window.setInterval(function()
{
    var bb = mycirc.getBBox();
    console.log("coords before transformation: " + bb.x + "," + bb.y);
    mycirc.transform("t1,1");
    var bb = mycirc.getBBox();
    console.log("coords after transformation: " + bb.x + "," + bb.y);

}, 500);

产量

coords before transformation: 120.98508107696858,106 jsfunctions.js:411
coords after transformation: 121.98508107696858,107 jsfunctions.js:414
coords before transformation: 121.98508107696858,107 jsfunctions.js:411
coords after transformation: 121.98508107696858,107 jsfunctions.js:411

等等。

知道为什么会这样吗？

(我尝试查看图形包的源代码，但由于没有空格而无法读取。)

Answer 1

你的代码

mycirc.transform("t1,1");

与当前状态无关。它只是从原始状态转换为 t1,1，然后从 t1,1 转换为 t1,1 等等。

你应该每次都计算变换。

编辑:所以它需要一个全局变量，每次都会递增:

var xyPos = 1;
window.setInterval(function()
{
    mycirc.transform("t"+xyPos+","+xyPos);
    xyPos++;
}, 500);