如何在闭包内移动 DOM 元素

我正在尝试使用闭包这个答案 https://stackoverflow.com/a/41231853/370407增量移动 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);

Codepen 上的第一个示例 http://codepen.io/mrengy/pen/BQMMbL。查看控制台，似乎由于某种原因，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);

Codepen 上的第二个例子 http://codepen.io/mrengy/pen/Jbxxqz。这将在屏幕上移动图像，但理想情况下（因为下一步是动态创建和移动许多这些图像）我想定义变量lThis在 - 的里面thunkAdd函数第一次运行时，如果定义了，则递增它并使用lThis变量来移动图像。我怎样才能做到这一点？

正如注释中已经提到的，return后的代码不会被执行，所以你永远不会改变元素的css left属性，而只是增加变量。

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

See 更新的例子 http://codepen.io/anon/pen/XNOGpO?editors=1111

您也可以考虑使用jqueryanimate http://api.jquery.com/animate/而不是这个（您也可以使用许多元素或在循环中执行此操作）

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