jQuery animate 回調函數參數傳遞問題與作用域陷阱

問題現象

使用 jQuery animate() 時，回調函數帶參數會出現各種錯誤，通常是變量作用域污染或閉包陷阱導致。

常見錯誤代碼

// 錯誤示例
var index = 0;
$('.item').each(function() {
    $(this).animate({left: '100px'}, 500, function() {
        callback(index);  // 所有回調都拿到最後的 index 值
    });
    index++;
});

// 或者全局變量被污染
var globalData = {};
function animateWithCallback(param) {
    globalData.param = param;  // 污染全局
    $('#elem').animate({opacity: 0.5}, 300, function() {
        handle(globalData.param);
    });
}

核心原因

1. 循環閉包：var 無塊級作用域，回調捕獲的是同一個變量引用
2. 全局污染：使用全局變量傳遞參數，併發動畫時互相覆蓋
3. 參數傳遞語法：animate(params, speed, easing, callback) 回調不接受額外參數

正確解決方案

方案一：IIFE 創建獨立作用域（ES5）

$('.item').each(function(i) {
    (function(index) {
        $(this).animate({left: '100px'}, 500, function() {
            callback(index);  // 正確捕獲當前 index
        });
    })(i);
});

方案二：使用 let 塊級作用域（ES6+）

for (let i = 0; i < items.length; i++) {
    $(items[i]).animate({left: '100px'}, 500, function() {
        callback(i);  // 每次循環 i 都是獨立綁定
    });
}

方案三：數據屬性綁定參數

$('.item').each(function(i) {
    $(this).data('callback-index', i)
           .animate({left: '100px'}, 500, function() {
        var index = $(this).data('callback-index');
        callback(index);
    });
});

方案四：Promise 化統一管理（推薦）

function animatePromise($elem, props, duration) {
    return new Promise(resolve => {
        $elem.animate(props, duration, resolve);
    });
}

// 使用
async function runAnimations() {
    for (let i = 0; i < items.length; i++) {
        await animatePromise($(items[i]), {left: '100px'}, 500);
        callback(i);  // 同步寫法，無閉包煩惱
    }
}

最佳實踐總結

• 優先使用 let/const 避免變量提升問題
• 複雜動畫序列用 Promise/async-await 扁平化邏輯
• 避免全局變量傳遞動畫狀態
• 利用 .data() 或 .attr() 在 DOM 上攜帶上下文