为什么面试总问防抖节流

前言

正所谓面试造火箭，工作打螺丝，防抖节流在提升性能和用户体验起到了重大的作用，话不多说，直接开始。

一、什么是防抖和节流

防抖

防止多次点击或者其他操作造成执行多次事件，只在最后一次停止操作后执行

防抖的使用场景

• 防止表单的重复提交
• 输入框搜索输入，防止多次搜索
• 拖拽功能的计算，防止多次计算
• 页面滚动加载更多时，防止多次加载
• 防止按钮频繁点击，例如：搜索按钮

手写防抖函数

/**
 * 使多次重复操作后，只会在最后一次执行
 * fn:需要执行的函数事件
 * delay:执行延迟时间
 */
function debounce(fn,delay=200){
  let timer =null;
  return function (){
    clearTimeout(timer);
    timer = setTimeout(()=>{
        fn.apply(this)
    },delay);
  }
};

//使用时一定要挂载到相应事件上
xxx. addEventListener('click',debounce(fn));

记忆防抖小妙招

游戏里的回城，就非常形象，点击回城，开始回城特效倒计时，当我们每点一次回城按钮，回城就会被打断，回城进度时间会重新开始

节流

一段时间内只会执行一次

节流的使用场景

• 输入框搜索输入，防止多次搜索
• 拖拽功能的计算，防止多次计算
• 页面滚动加载更多时，防止多次加载
• 防止按钮频繁点击，例如：搜索按钮

手写节流函数

 *一段时间内只会执行一次
 * fn:需要执行的函数事件
 * delay:执行延迟时间
 */

function throttle(fn,delay){
  let timer = null;
  return function(){
    if(timer) return;
    timer = setTimeout(()=>{
      fn.apply(this)
      timer = null;
    },delay)
  }
}
let btn = document.getElementById('btn');
btn.addEventListener('click',throttle(()=>{
  console.log('节流，一段时间内执行一次')
},5000))

记忆节流小妙招

游戏里的攻击按钮，无论你规定时间点多少下，每次只会在规定时间内攻击一次