js基础--(一) 防抖和节流

防抖：可以多次点击，但是只有最后一次的点击才会生效

 <button id="submitbtn">提交</button>
 
    <script>
        let submit = function (e) {
            console.log('提交了');
        }
        submitbtn.onclick = debounce(submit, 1000)

        function debounce(fn, time) {
            console.log(this, arguments);
            let timer = null
            let n = 0
            return function () {
                console.log(this, arguments);
                console.log('点击的次数', ++n);
                if (timer) {
                    console.log('清除前面一次的timer');
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn.apply(fn, arguments)
                }, time)
            }
        }
    </script>

在我们进入页面的时候，debounce函数已经是执行了的，此时，可以说debounce函数的执行栈结束了，可以销毁了

当我们多次点击提交按钮的时候，可以看到debounce函数的返回函数是有多次执行的，此时这个函数中需要用到变量timer,n,这些值可以从debounce函数中获取，由于debounce函数已经销毁了，这些变量只有这个在这个返回函数中可以取到，称为debounce函数的闭包函数，在页面调试中也可以看到

而且我们还可以看到一些额外的信息，如this是指向的button按钮，结合这些打印值，我们可以很清楚的看到每次点击按钮的时候，会清除之前的timer，第一次不会，因为timer为null,最后一次点击，也会清除上一次的timer，然后在执行新的定时器，打印出"提交了"

假设我们不清楚timer，看一下效果，页面会多次点击，并且在延时时间之后多次触发

要实行防抖函数，首先需要定时器，并且可以记录下定时器的状态，但是一般的函数执行完了就销毁了，这就需要用到闭包（在外层函数中定义变量，并且执行这个函数，返回的新的函数中使用这些变量），来储存定时器的状态。