JavaScript 定時器變量作用域陷阱：全局變量確保回調可訪問

在 AJAX 成功回調中啟動定時器執行函數時，若定時器 ID 與計數器變量聲明在函數內部，會導致回調函數無法訪問，無法清除定時器或控制次數。本文通過實例講解變量作用域問題及正確解決方案。

問題代碼

function ajax() {
    // ... AJAX 請求
    if (status == "success") {
        var i = 10;              // 局部變量
        var intervalid = setInterval(fun, 1000); // 局部變量
    }
}

function fun() {
    // 無法訪問 i 和 intervalid
    if (i <= 0) clearInterval(intervalid); // ReferenceError
    i--;
}

錯誤原因

• var i 和 var intervalid 在 ajax() 函數作用域內
• fun() 定義在全局作用域，無法訪問外層函數的局部變量
• 每次調用 ajax() 都會創建新的變量，舊定時器無法清除

正確解決方案

方法一：全局變量（簡單直接）

var intervalid, i;  // 全局聲明

function ajax() {
    // ...
    if (status == "success") {
        i = 10;  // 重置計數
        intervalid = setInterval(fun, 1000);
    }
}

function fun() {
    if (i <= 0) {
        clearInterval(intervalid);
        return;
    }
    // 執行邏輯
    i--;
}

方法二：閉包封裝（推薦，避免污染全局）

function createTimer(callback, interval, count) {
    let remaining = count;
    const id = setInterval(() => {
        if (remaining <= 0) {
            clearInterval(id);
            return;
        }
        callback();
        remaining--;
    }, interval);
    return id;
}

// 使用
if (status == "success") {
    createTimer(fun, 1000, 10);
}

方法三：將狀態附加到定時器返回值對象（現代瀏覽器）

const timer = {
    id: null,
    count: 10,
    start() {
        this.id = setInterval(() => this.tick(), 1000);
    },
    tick() {
        if (this.count <= 0) {
            clearInterval(this.id);
            return;
        }
        fun();
        this.count--;
    }
};

最佳實踐總結

1. 全局變量：適合簡單頁面，注意命名衝突（加前綴如 timer_）
2. 閉包/對象封裝：適合模塊化項目，狀態自包含，無副作用
3. 清除定時器：務必在組件銷毀、頁面卸載時調用 clearInterval 防止內存洩漏
4. 避免重複啟動：啟動前檢查 if (timerId) clearInterval(timerId)