JavaScript函数只有在我第一次调用它时才起作用

JavaScript function is only working the first time I call it?

本文关键字：调用 起作用 第一次 函数 JavaScript      更新时间：2023-09-26

我想知道你们是否能帮我解决我遇到的问题。希望识别问题不需要查看我正在使用的图形包的文档，但如果需要，请点击：http://raphaeljs.com/reference.html#Element.transform.

我有以下代码块

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

其当然应当每半秒调用函数CCD_ 1。该函数应该将mycirc的x和y坐标分别平移1个单位（参见上的Element.transform（[tstr]）http://raphaeljs.com/reference.html#Element.transform)。

然而，当我测试我的页面时，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

等等。

知道为什么会这样吗？

（我试着浏览图形包的源代码，但由于没有空白，它不可读。）

您的代码

mycirc.transform("t1,1");

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

每次都应该计算变换。

EDIT：因此它需要一个全局变量，每次递增，如：

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

在链接的文档的用法部分，它展示了如何准备和附加转换。这对我来说意味着你的代码每次都会将转换重置为相同的东西。我从来没有使用过这个图形库，所以我不能肯定，但试一下下面的东西，看看它是否有效：

mycirc.transform("t1,1");
mycirc.transform("...t1,1");
mycirc.transform("...t1,1");
mycirc.transform("...t1,1");

我相信这将应用相同的变换4次。当然，您需要将此逻辑转换为一个间隔以供使用。

我认为这是预期的行为。引用文档：

将转换添加到与其他元素分离的元素属性，即平移不会改变矩形的x或y。

尝试：

var amount = 1;
window.setInterval(function()
{
    mycirc.transform("t" + [amount, amount].join(','));
    amount++;
}, 500);
相关文章：