你不知道的秘密之函数防抖

函数防抖

• 先仔细看一下看不懂的函数防抖的定义

  • 当函数在很小的一个时间段内被频繁触发的时候 , 只有当其中任意相邻两次触发之间的时间间隔达到一定长度 , 该函数才会执行一次

• 其实函数防抖就和日常生活赶公交 , 我们都希望赶得上一个道理

• 先用代码模拟一下一旦有个人上车 , 就立马开车的司机

  // 开车函数
  function kaiChe() {
    console.log('车开走了~');
  }
  // 打开车门
  var door = document.getElementById('ipt');
  // 一旦有人进入就立即开车
  door.oninput = kaiChe;
  

• 说实话我这辈子也不想碰见这种司机

• 既然如此就从我做起 , 做一名全心全意为乘客着想的好司机！

  // 准备一个秒表
  var clock;
  // 一旦有乘客上车
  door.oninput = function () {
    // 将表清零
    clearTimeout(clock);
    // 开始计时10秒钟 , 等后面的人上车
    clock = setTimeout(() => {
      // 10秒内没人上车再开车
      kaiChe();
    }, 10000);
  }
  

• 但是呢 , 我们没必要每次都等10秒 , 也并非只有在开公交的时候需要等人 , 我们将这种等待再执行的操作抽象出来封装成函数 , 更具有通用性

  function debounce(fn, delay) {
    var clock;
    return function () {
      clearTimeout(clock);
      clock = setTimeout(fn, delay);
    }
  }
  
  // 调用方式 : 4秒之内无人上车再开车
  door.oninput = debounce(kaiChe, 4000);
  
  // 我计划等到周六睡懒觉嘿嘿嘿
  me.onplan = debounce('睡懒觉', '周六');
  

• 函数防抖应用场景

  • 实时搜索 ( keyup )

  • 拖拽( mousemove )