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

Question

我想要这样的效果，即：
点击btn按钮，想要总是实时的获取a的值，结果只能获取窗口缩放前a变化的值。其中代码中的unLoad是为了缩放窗口后，防止btn多次绑定匿名函数。
源代码如下：
varbtn=document.querySelector(".btn");
varunLoad=true;
vartimer=null;
functionadd(){
vara=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外面，作为全局变量。
varbtn=document.querySelector(".btn");
varunLoad=true;
vartimer=null;
vara=1;
functionadd(){
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时，反应出来啊？
请各位赐教下，谢谢~

Answer 1

第一段代码,触发resize时间后，第二次add函数取消了定时器，造成了第一次add函数作用域中a值就不会变化了。clearInterval(timer);//timer是全局变量，第二次add函数影响到了第一次add函数

Answer 2

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