JS练习--实现一个防抖函数

防抖实现：事件发生时延迟一段再去执行，如果在等待时间内，有同类型事件发生，等待时间重新计时--把多次执行变为最后一次执行

<script>
        var oDiv = document.querySelector("div");
        var n = 0;
        
        oDiv.onclick = move;// 直接引用函数
        function move() {
            n += 15;
            oDiv.style.left = n + 'px';
        }
</script>

当没有设置防抖函数时，点击一次元素盒子移动一次，可以一秒之内点击多次让其多次移动。

<script>
        var oDiv = document.querySelector("div");
        var n = 0;
        // oDiv.onclick = move;// 4.直接引用函数
        // 4.直接引用函数
        oDiv.onclick = debounce();
        // 1.声明运动函数
        function move() {
            n += 15;
            oDiv.style.left = n + 'px';
        }
        // 2.声明一个防抖函数
        var timer = null;
        function debounce() {
            return function () {
                // 5.每用一次清除一次定时器
                clearTimeout(timer);
                // 3.设置定时器  隔一段时间再去执行
                timer = setTimeout(function () {
                    move();
                }, 1000);
            };
        }
    </script>

当设置防抖函数后，一秒内只能点击一次，多次点击无效。