前端面试题系统--防抖和节流

面试过程中多次被问到前端性能优化的防抖和节流，下面做一个总结

目录：

防抖和节流的概念

应用场景

手写代码

 防抖概念

连续触发事件，但在一段事件内只执行最后一次。

例如：设定10毫秒执行，当你触发事件之后，会在10毫秒之后执行，但你在还剩5毫秒的适合又触发了一次事件，这时将从新计时。即在这之后的10毫秒才会执行。

从新开始

节流概念

连续触发事件，但在设定的一段时间内只执行一次函数。

例如：设定10毫秒执行，在这10毫秒内触发多次，也只能10毫秒后执行一次

不要打断我

应用场景

防抖：

搜索框搜索输入

文本编辑器实时保存

节流

 高频事件 eg: 快速点击、鼠标滑动、resize事件、scroll事件

下拉加载

视频播放记录时间等

 手撕代码

防抖---定时器

let timer = null 

document.querySelector('.ipt').onkenyuo = function(){

    if(timer !== null){
        clearTimeout(timer)
    }
    
    timer = setTimeout(()=>{
    
        console.log('防抖')
    },10)
}

节流---定时器

let timer = null 

document.querySelector('.ipt').onkenyuo = function(){

    if(timer !== null){
        return
    }
    
    timer = setTimeout(()=>{
    
        console.log('节流')
        timer = null 
    },10)
}

节流---截止日期

//函数节流的实现;
function throttle(fn， delay) {
    let curTime = Date. now( );
    return function() {
    let context = this,
    args = arguments,
    nowTime = Date. now( );
    //如果两次时间间隔超过了指定时间，则执行函数。
    if (nowTime - curTime >= delay) {
        curTime = Date. now( );
        return fn. apply( context, args);
    };
}