前端高频面试题系列之第3题

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

在开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数浪费性能。

// 防抖
function debounce(fn, wait) {
    var timeout = null;
    return () => {
        if (timeout !== null) {
            clearTimeout(timeout);
            timeout = setTimeout(fn, wait);
        }
    }
}
// 截流
function throttle(fn, delay) {
    var lastTime = 0; // 上一次函数触发的时间
    return () => {
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            fn(); // method.apply(this) 看你用不用箭头函数
            lastTime = nowTime;
        }
    }
}
//处理函数
function handle() {
    console.log(Math.random());
}


// 滚动事件
window.addEventListener('scroll', handle, 1000);
window.addEventListener('scroll', throttle(handle, 1000));

防抖（debounce）

指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

原理：在第一次调用函数的时候，创建一个定时器，在指定的时间间隔之后运行代码；如果代码还没运行时，又触发了该函数，则清除旧的定时器，重新创建新的定时器；如果超过延时执行的时间，代码执行了，则此时已经是第二次触发；

earch搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流（throttle）

指连续触发事件但是在 n 秒中只执行一次函数

一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。

原理：第一次执行函数的时候，记录函数执行的时间，当下一次执行的时候，比较时间是否还在间隔时间内，如果是则不执行，否则继续执行；

鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

函数防抖和节流，都是控制事件触发频率的方法。应用场景有很多，输入框持续输入，将输入内容远程校验、多次触发点击事件、onScroll等等。

本文视频对应前端大厂高频面试题，除此之外，如果你对技术有像一素的偏执，欢迎加我vx:15910703837一起学习一起进步。