改变闭包外部函数私有变量的值，然后间歇调用这个闭包

Question

输入一个值，点击之后，控制台从您输入的这个值开始递增加1打印
我的实现方式：贴上代码

<input type="text" id="i">
<button id="btn">点击</button>
<script>
    var btn = document.getElementById("btn");
    var input = document.getElementById("i");
    btn.onclick = function() {
        // alert(1);
        var i = input.value;
        function a() {
            i++;
            console.log(i);
        }
        setInterval(a,2000);
    }
</script>

监听函数里面包含一个闭包函数和间歇调用函数。当您输入1的时候，2s（时间取长一点可以看出效果）过后开始执行闭包函数，然后控制台依次输入1,2,3...然后在此期间，改变输入值，比如100，然后控制台会与第一次的输入交替输出100,101,102..。

重新输入数字之后，按下按钮，都会重新执行代码，交替打印是因为上一次点击时产生的闭包未销毁还在内存中引用着上一次点击时的函数活动对象，又由于JavaScript是单线程解释器，所以两个闭包在争夺资源。不知理解正确？
如果我上面的理解正确，我想问的是，如何在下次重新输入值并点击时释放上次闭包引用，按照重新输入的值开始递增？

Answer 1

在点击事件的外部定义一个变量timer，点击的时候先判断下timer是否被赋值，赋值的话清除timer，最后将定时器赋值给timer。
代码示例：
var timer ;
btn.onclick = function(){

timer && clearInterval(timer);
//some code...
timer = setInterval(a,2000);

}

Answer 2

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
函数体外定义一个变量代表setInterval(),
每次点击前判断该变量的值,不为空就用clearInterval()清除该定时器.

Answer 3

var i ;
function(){

......
i = input.value;
......      
}

Answer 4

因为每次点击都新建了一个定时器，多个定时器同时运行。
可以改成这样

1. onclick = function (){
   this.timer?clearInterval(timer);

.....

1. timer = setInterval(...);
   }