前端面试题之函数防抖与函数节流

函数防抖和函数节流

问题案例：如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？
—为了应对这种场景，便出现了函数防抖和函数节流两个概念，总的来说：这两个方法是在时间轴上控制函数的执行次数。

函数防抖(debounce)
—概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计算。
—生活中的案列：如果有人进电梯(触发事件)，那电梯将在10秒钟后出发(执行事件监听器)，这时如果又有人进电梯了(在10秒内再次触发该事件)，我们又得等10秒再出发(重新计时)。
—应用场景：

• 搜索框搜索输入。只需用户最后一次输入完，再发请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染

—代码演示：

function fun(){
  console.log('onresize')
}
function throttle(method,context){
          clearTimeout(method.timer);
          method.timer=setTimeout(function(){
              method.call(context);
          },500);
      }

window.onresize = ()=>throttle(fun,window)

—代码说明：代码意思很明显,这个方法接受你想防抖的函数以及他的上下文,然后在500ms延时之后执行这个函数,若下一次函数在500ms内调用则清除上个定时器然后在延迟500ms执行,函数防抖有效的防止了一个函数被多次调用

函数节流(throttle)
—概念：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效
—生活中的案列：乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。
—应用场景：

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交

—代码演示：

var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
  return
}
canRun = false
setTimeout( function () {
    console.log("函数节流")
    canRun = true
  }, 500)
}

—相对于防抖，节流就是在让函数在特定的时间内只执行一次
用一个flag让该函数在500ms内只执行一次

区别
—他们都是可以防止一个函数被无意义的高频率调用
区别在于：

函数节流：是确保函数特定的时间内至多执行一次。
函数防抖：是函数在特定的时间内不被再调用后执行。

未完待续…