准备准备秋招了（温水煮青蛙）

最近论文弄得想si，数据处理阶段就已经弄不下去了，但已经八月份了，秋招马上又要开始了，淦。以前看网上的那些每日一题，心里都默默地在算一年不断也就能弄365题，感觉脑子多少沾一点，好的，今天开始我也来，先来看看那些前端高频js手写面试题叭。

Day1:防抖节流

   老掉牙的题目了，但以前都是粗略的看一下根本没有理解，最近在网上看到一个形容让我一下就理解并且牢记了这两个玩意：防抖就是回城，节流就是技能CD，来具体看看。

一、防抖

  防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

  想象一下，当你极限反杀的时候想要装杯原地回城，读秒到一半的时候你不小心手抖点到鼠标取消了回城，你又按下了B键，回城的读秒是不是又从0开始了。是不是很形象？下次别手抖了。

  代码实现一下呗

/* 防抖*/
// 非立即防抖 (回城)
function debounce(wait,func,...args){
    var timer = null
    return ()=>{
        clearTimeout(timer)
        timer = setTimeout(()=>{
            func(...args)
        },wait)
    }
}


//立即防抖
function rightDebounce(wait,func,...args){
    var timer = null
    return ()=>{
        if(!timer){
            func(...args)
        }
        clearTimeout(timer)
        timer = setTimeout(()=>{
            func(...args)
        },wait)
    }
}

二、节流

  节流函数原理:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

  说这玩意是技能CD真没毛病，当你开局把闪现按了之后，你不仅要被发问号，而且你6分钟之内键盘按烂了你也闪不出来。希望你们的每次失误都能被善待而不是被发问号。

代码实现：

/*节流  （CD）*/ 
function throttle(wait,func,...args){
    var timer = null
    if(!timer){
        func(...args)
        setTimeout(()=>{
            timer = null
        },wait)
    }
}

 

三、适用场景

不是，哥们学这个有什么用呢？

防抖：

• 按钮提交场景：防止多次提交按钮，只执行最后提交的一次

• 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似

节流：

• 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动

• 缩放场景：监控浏览器resize

• 动画场景：避免短时间内多次触发动画引起性能问题