面试手写代码系列一（防抖与节流）

防抖（debounce）

定义：触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行事件。（多次点击只执行最后一次）

应用：搜索框搜索输入。只需用户最后一次输入完，在发送请求

            手机号、邮箱验证输入检测onchange oninput事件

             窗口大小resize。只需窗口调整完成后，计算窗口大小，防止重复渲染

举例：

        就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发

const debounce=(fn,wait,immediate)=>{
    let timer=null;
    return function（...args){
        if(timer)clearTimeout(timer);
        if(immediate && !timer){
            fn.call(this,args)
        }
        timer=setTimeout(()=>{
            fn.call(this,args)
        },wait)    
    }
}
const betterfn=debounce(()=>console.log('防抖执行')，1000，true)
document.addEventListener("scroll", betterFn);

//获取元素
var box = document.getElementsByID('box');
box.addEventListener('click',function(){
    // 添加定时器之前清除定时器
   clearTimeout(timer)
    //延迟2秒触发
   timer = setTimeout(function(){
           console.log(8888)
   },2000)
})

节流(thorttle)

定义：当持续触发事件时，保证隔间时间触发一次事件(规定的时间内只执行一次)

应用：懒加载，滚动加载，加载更多或监听滚动条位置

            百度搜索框，搜索联想功能

            防止高频点击提交，防止表单重复提交

举例：

        预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug

function throttle(fn,wait){
    let pre=0;
    return function(...args){
        let now=Date.now()
        if(now-pre>=wait){
            fn.apply(this,args)
            pre=now
        }

    }    

}

function handle(){
    console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));

//获取元素
var box = document.getElementsById('box');
//定时器变量为空
var timer = null;
box.addEventListener('click',function(){
    	//判断有没有定时器 有的话不执行 没有的话执行
        if(timer) return;
    	// 定时器
        timer = setTimeout(function(){
              console.log(8888)
              timer = null;
        },3000)
})

相同点：

        1、都使用setTimeout实现

        2、目的都是，降低回调执行频率，节省计算资源（它们都是可以防止一个函数被无意义的高频率调用）

不同点：

        1、函数防抖，在一段连续操作结束后，利用clearTimeout和setTimeout实现，函数节流，在一段连续操作中，每一段时间执行一次，频率较高的事件中使用来提高性能

        2、函数防抖关注一定事件连续触发，只是最后执行一次，函数节流是一段时间内执行一次