JavaSxcript高频面试点——防抖

前言

在前端开发中会遇到一些频繁的事件触发，比如：

1、window 的 resize、scroll
2、mousedown、mousemove
3、keyup、keydown
……

防抖是什么？？

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

怎么解决防抖问题？

思路：
每次触发事件时都取消之前的延时调用方法。

简答的例子：
大家都知道外地人想要在北京买房，就得交够五年的社保，，当我一直交在未满五年时候，我其中一年断交了、忘交了，，那么我就得从头再来个五年。

以mousemove事件举例

当用户移动鼠标到绑定该事件的该区域并一直移动时候，会一直触发mousemove事件，这会对浏览器或服务器造成了过多压力，这就需要去优化了。

<div class="box"></div>
const box = document.querySelector('.box')
        // 自定义变量i
    let i = 1
     // 创建鼠标移动函数，鼠标移动，让变量++
    function mouseMove() {
        box.innerHTML = ++i
    }
// debounce 防抖
 function debounce(fn, time) {
        let timer 
        return function() {
            // 有定时器,则清除
            if (timer) {
                clearInterval(timer)
            }
            // 开启定时器
            timer = setTimeout(function() {
                // 调用函数fn
                fn()
            }, time)
        }
    }
    box.addEventListener('mousemove', debounce(mouseMove, 3000))

代码执行后，鼠标移动到div当中，三秒内鼠标若再次移动，则不会再调用mouseMove函数，变量i不会再自增。