JavaScript 全域變數與定時器作用域陷阱解析

問題現象

將變數宣告與 DOM 操作寫在函式外部（全域），預期定時器能更新畫面透明度，但畫面只執行一次，後續定時器回調無效果。

代碼對比

// 錯誤寫法：全域執行一次
var value = 0;
document.getElementById('pic').style.opacity = value / 100; // 只執行這行一次

setInterval(function() {
    value += 10;
    alert(value); // 這裡 value 會變化
}, 100);

// 正確寫法：邏輯封裝在函式內
var value = 0;
setInterval(function() {
    value += 10;
    document.getElementById('pic').style.opacity = value / 100; // 每次都執行
    if (value >= 100) clearInterval(timer);
}, 100);

核心原理解析

• 全域程式碼：腳本載入時立即執行 一次，不會重複。
• 函式/回調：每次事件觸發（定時器、點擊等）執行 一次。
• 閉包：內部函式可存取外部變數 value，形成閉包，保持狀態。

最佳實踐

1. 所有需重複執行的 DOM 更新邏輯 必須放入回調函式。
2. 使用 let/const 取代 var，避免變數提升造成困擾。
3. 定時器啟動後保存 ID：const timer = setInterval(...)，方便 clearInterval(timer)。
4. 現代寫法可用 requestAnimationFrame 實現平滑動畫。

延伸：變數提升陷阱

console.log(x); // undefined (非報錯)
var x = 10;
// 等同於
var x;
console.log(x);
x = 10;

使用 let/const 會進入「暫時性死區」，直接拋出 ReferenceError，更易除錯。