Javascript jQuery动画回调中的变量会导致父循环中的范围混淆

关于在JS中使用闭包，我已经看到了很多答案，但没有任何适合我的情况： 在浏览器窗口中，我有许多单词以不同的大小和位置随意排列。 这个函数会将它们缩小到相同的大小，然后将它们并排放置，一个接一个，从左到右（将单词重新排序为一个句子）

我在

animate（）

回调中增加的

x\u align

不会反映在

left:x\u align

的后续循环中

---

非常感谢您的帮助，

所有回调都在动画启动后很长时间内运行（它们都是同时启动的）。您的目标不是100%明确，但您可能希望链接动画，而不是像这样并行运行它们，例如：

var x_align = 100,
    otherWords = $('.other-word'),
    fontSize = $('.main-word').css("font-size").slice(0, -2),
    top = $('.main-word').css("top"),
    i = 0, n = otherWords.length;
(function doOne(){
    if (i++>=n) return;
    otherWords.eq(i).toggleClass("other-word-animate")
    .animate({
        fontSize: fontSize,
        top: top,
        left: x_align
    }, function(){
        x_align += $(this).width() + 5;
        doOne();
    });
})();

---

所有回调都在动画启动后很长时间内运行（它们都是同时启动的）。您的目标不是100%明确，但您可能希望链接动画，而不是并行运行它们。您所说的“x_align不递增”是什么意思？我看不到关于这个的声明@是的，我的问题是回调中分配给

x\u align

的值在

left:x\u align

处使用时不会反映在下一次循环迭代中。你是对的，这是因为事情没有按顺序正确运行。我正在寻找一种方法来做到这一点，如果你知道怎么做，谢谢@dollarvar当我说“递增”时，我的意思是在

x_align+=$（this.width（）+5。很抱歉给你带来了困惑。我读过其他一些帖子，关于闭包如何帮助我的
x_align
在每个循环中保持它的新增量值，但我无法使它工作…@JCNesci OK，写了一些应该工作的东西（当然没有测试）。@JC-Nesci:这行吗？我想你需要这样的东西。所以您的第一行是：
varx={align:100}。在函数中，您必须执行：
x.align+=$（this）.width（）+5。看看吧；）@dollarvar这是一个有趣的旁注。但是我不明白你最后一句关于
x\u align+=…
的话。如果你能澄清，那就太好了！谢谢这个答案解决了我关于为每个循环正确保存
x\u align
值的问题。谢谢！我想知道，这种图案有没有合适的名字？我不知道。我时不时地做，不知道这是否普遍。它包括一个iLife（我让你用谷歌搜索），但它的命名允许递归。所以我想你可以把它称为一个名为IIFE的递归函数……另外，请注意，如果你对处理JS中异步性的方法非常感兴趣，那么你可能想了解一下promises（我推荐BlueBird.JS）。但请注意，这既有趣又困难：）
var x_align = 100,
    otherWords = $('.other-word'),
    fontSize = $('.main-word').css("font-size").slice(0, -2),
    top = $('.main-word').css("top"),
    i = 0, n = otherWords.length;
(function doOne(){
    if (i++>=n) return;
    otherWords.eq(i).toggleClass("other-word-animate")
    .animate({
        fontSize: fontSize,
        top: top,
        left: x_align
    }, function(){
        x_align += $(this).width() + 5;
        doOne();
    });
})();