Question

我已经看到很多关于在JS中使用闭包的答案，但我无法适应我的情况：我在浏览器窗口中以各种大小和位置随机散布了许多单词。这个函数会将它们缩小到相同的大小，然后将它们并排放置，一个接一个地，从左到右（将这些单词重新排序成句子）。

function alignWords() {

    // starting X position
    var x_align = 100;  

    // loop thru each word, shrink its size (ie. font-size) and position them end-to-end on X axis (with 5px spacing)
    $('.other-word').each(function(index, item){
        $(item).toggleClass("other-word-animate");

        console.log("t- x1 = "+ x_align)        // does not increment. Outputs: t- x1 = 100, t- x1 = 100, t- x1 = 100, etc...

        $(item).animate({
            'font-size': $('.main-word').css("font-size").substr(0, $('.main-word').css("font-size").length-2),
            top: $('.main-word').css("top"),
            left: x_align                       // always remains 100, which is wrong
        }, function() {
            x_align += $(this).width() + 5;
            console.log("t- x = "+ x_align);    // increments correctly. Outputs: t- x = 154, t- x = 311, t- x = 316, etc...
        });

    });
}

我x_align回调中animate()的增量未反映在left: x_align的后续循环中。

非常感谢，

Answer 1

所有回调都在动画启动后很长时间内运行（它们全部同时启动）。您的目标不是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();
    });
})();

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

1 个答案: