进行数据防抖过程中对于方法执行顺序的一些疑惑

Question

<script>
        var btn = document.getElementById("btn");
        btn.addEventListener('click',debounce(submit),false);
        function submit(e){
            console.log(e)
        }
        function debounce(fn){
            var t = null;
            console.log(123)
            return function(e){
                if(t){
                    clearTimeout(t);
                }
                t = setTimeout(function(){
                    fn()
                },1000)
            }
        }
</script>

在学习防抖的时候看到的案例，这里的debounce内部的var t = null 和 console 为什么只在页面加载时候执行一次，后续触发click事件时，只会执行return function(e) 这一部分。

Answer 1

btn.addEventListener('click',debounce(submit),false);
加粗部分就是立即执行debounce函数，然后将debounce函数返回值作为btn的click事件处理函数，等价于下面这样

var btn = document.getElementById("btn");
var fnclick=debounce(submit);//执行debounce 函数，将函数返回值赋值给fnclick
btn.addEventListener('click',fnclick,false);//fnclick为返回的匿名函数