关于#javascript#的问题：防抖函数的作用域问题，有关改函数被多次触发，为什么可以获取到同一个timer

Question

疑问求解：防抖函数的这个写法，重复触发后，timer 作为一个计时器被不停重置。但是我的理解是，在多次触发的时候 这个timer 与上一个 timer 是存在于同一个作用域内的吗？也就是此时的timer 与上一个timer 为什么会是同一个这个问题。可能是我钻牛角尖了，我错误的认为这个方法被触发的时候，是两个独立的作用域，但是我不理解为什么。

```javascript
var btn = document.getElementById('btn');
        function debounce (fn, delay) {
            let timer = null
            return function () {
                // 在规定时间内再次触发会先清除定时器后再重设定时器
                console.log(timer)
                clearTimeout(timer);
                timer = setTimeout(function () {
                    console.log(this)
                    fn.apply(this, arguments);
                }, delay);
            }
        }
        function fn () {
            console.log('防抖')
        }
        btn.onclick = function () {
            debounce(fn, 3000)()
        }

```

Answer 1

这个问题涉及到函数闭包的知识点。你可以看到，timer这个变量是在debounce函数中定义的，所以timer存在于debounce的作用域中，而我们调用的函数是debounce的返回值。正常情况下，debounce函数返回结果之后，它的生命周期就结束了，然后它的返回值当中包含着timer的引用，所以timer始终没有被垃圾回收掉，所以debounce函数的作用域也就一直存在，而无论调用多少次的onClick，它所用到的timer都是最开始debounce函数中的那个timer.