前端面试——JS篇（什么是防抖和节流？手写防抖、节流函数）

一、防抖

防抖是什么？

单位时间内，频繁触发事件，只执行最后一次

防抖有什么使用场景呢？

(1)  搜索框输入。只需要用户最后一次输入完，再发送请求

(2)  手机号、邮箱验证输入监测

二、节流

节流是什么？

单位时间内，频繁触发事件，只执行一次

节流有什么使用场景呢？

鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等

举个例子：

王者荣耀技能冷却，期间无法继续释放技能

和平精英98k换子弹期间不能射击

接下来手写防抖函数和节流函数：

（1）手写防抖函数

// 手写一个防抖函数
        const box = document.querySelector('.box')
        let i = 1;
        function mouseMove() {
            box.innerHTML = i++
        }

        function debounce(fn, t) {
            // 核心是利用settimeout定时器来实现
            // 1.声明定时器变量
            // 2.每次鼠标移动都要判断是否有定时器，如果有先清除以前的定时器
            // 3.如果没有，则开启定时器，存入到定时器变量里面
            // 4.定时器里面写函数调用

            let timer;
            return function () {
                if (timer) clearTimeout(timer)
                timer = setTimeout(function(){
                        fn()
                    },t)
            }
        }
        box.addEventListener('mousemove', debounce(mouseMove, 500))

（2）手写节流函数

<script>
        const box = document.querySelector(".box")
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
        }
        // 手写一个节流函数
        function throttle(fn, t) {
            // 节流函数的核心就是利用定时器来实现
            // 1.声明一个定时器变量
            // 2.当鼠标移动(事件触发)先判断是否有定时器了，如果有定时器了，则不开启新的定时器了
            // 3.如果没有定时器则开启定时器，记得存到变量里面
            //   3.1  定时器里面调用执行的函数
            //   3.2 定时器里面要把定时器清空
            let timer = null
            return function () {
                if (!timer) {
                    timer = setTimeout(function () {
                        fn()
                        timer = null
                        // 在开启的定时器里面不能够清空定时器，不能使用clearTimeout
                    }, t)
                }
            }


        }
        box.addEventListener('mousemove', throttle(mouseMove, 300))
    </script>