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

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);