一个作用域的问题，求解答？

我想要这样的效果，即：
点击btn按钮，想要总是实时的获取a的值，结果只能获取窗口缩放前a变化的值。
其中代码中的 unLoad 是为了缩放窗口后，防止btn多次绑定匿名函数。

源代码如下：

<input type="button" value="点击" class="btn" />

var btn = document.querySelector(".btn");
var unLoad = true;
var timer = null;

function add(){
    var a = 1;
    if(unLoad){
        btn.addEventListener("click",function(){
            document.title = a;
        },false);
    }

    clearInterval(timer);

    timer = setInterval(function(){
        a++;
        console.log(a);
    },1000);

    unLoad = false;
}

add();

window.addEventListener("resize",function(){
    add();
    console.log("resize");
},false);

后来，我改动了下代码，把a放到add外面，作为全局变量。

var btn = document.querySelector(".btn");
var unLoad = true;
var timer = null;
var a = 1;

function add(){

    if(unLoad){
        btn.addEventListener("click",function(){
            document.title = a;
        },false);
    }

    clearInterval(timer);

    timer = setInterval(function(){
        a++;
        console.log(a);
    },1000);

    unLoad = false;
}

add();

window.addEventListener("resize",function(){
    add();
    console.log("resize");
},false);

然后缩放窗口前后测试发现，又可以实时获取a的变化值。

另外，如果不把a移出add外面，就像第一段代码一样把a作为add的局部函数，但是不对btn做绑定判断（即去掉外面的if判断），那么也可以实时获取a的变化值。

我现在的问题是，不能理解，为啥第一段代码不能实时获取a的值呢？这种情况下，点击btn按钮，不是要去add函数中寻找a的值吗？而定时器又不断在改变a的值，a作为add函数的局部变量，应该可以在点击btn时，反应出来啊？

请各位赐教下，谢谢~

---

第一段代码, 触发 resize 时间后，第二次 add 函数取消了定时器，造成了第一次 add 函数作用域中 a值就不会变化了。

clearInterval(timer); //timer 是全局变量，第二次add函数影响到了第一次add函数

---

/*在 window.addEventListener 中添加 unLoad = true 即可，原因是当第一次调用add()时将unload设置为 false */
window.addEventListener("resize",function(){
unLoad = true;
add();
console.log("resize");
},false);