Question

我试图按照this answer使用闭包来逐步移动DOM元素。最终我想动态创建许多应该独立移动的DOM元素，这就是我试图在函数中定义变量的原因。

给出答案的例子是

var lightning = new Array();
lightning.push($(".lightning"));

var l0 = -210;

function thunkAdd(){
  var lThis = l0;
  console.log('set lThis to '+ lThis);
  return function inc() {
    console.log('lThis = '+ lThis);
    return lThis ++;
  }
  lightning[0].css("left", lThis);
  console.log('lightning[0] left = '+lightning[0].css("left"));
}

var incrementInterval = setInterval(thunkAdd(), 33);

first example on codepen。在控制台中查看，似乎由于某种原因，console.log('lightning[0] left = '+lightning[0].css("left"));未运行。

我尝试过的另一种方法是：

var lightning = new Array();
lightning.push($(".lightning"));

var l0 = -210;
var lThis = l0;

function thunkAdd(){
  lThis ++;
  console.log('lThis = '+ lThis);

  lightning[0].css("left", lThis);
  console.log('lightning[0] left = '+lightning[0].css("left"));
}

var incrementInterval = setInterval(thunkAdd, 33);

second example on codepen。这将在屏幕上移动图像，但理想情况下（因为下一步是动态创建和移动许多这些图像）我想在第一次lThis函数内定义变量thunkAdd运行，然后如果已定义，则递增它并使用lThis变量移动图像。我怎么能这样做？

Answer 1

正如在回复中的注释代码中已经提到的那样，因此你永远不会改变元素的css left属性，只是增加变量。

您需要以间隔移动正在执行的lightning[0].css("left", lThis);内部关闭。

请参阅updated example

您也可以考虑使用jquery＆＃39; animate代替此问题（您也可以使用多个元素或循环执行此操作）

$(".lightning").animate({left: '2000px'}, 10000, 'linear');

如何在闭包内移动DOM元素

1 个答案: