防抖(debounce)

防抖:单位时间内,频繁触发事件,只执行最后一次


所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间

防抖(debounce)_第1张图片

        现在有一个小栗子:鼠标在box中移动的时候,触发mouseMove事件,如果不防抖的话,每移动1像素就会调用mouseMove()函数,如果mouseMove()函数中存在大量操作dom等情况,会产生卡顿,这个时候我们考虑防抖:单位时间内,频繁触发mouseMove事件,只执行最后一次

实现方式:

1.lodash 提供的防抖来处理


  

2.手写一个防抖函数来处理

防抖的核心就是利用定时器(setTimeout)来实现 :

  • 声明一个定时器变量
  • 当鼠标每次滑动都先判断是否有定时器了,如果有定时器先清除以前的定时器
  • 如果没有定时器则开启定时器,记得存到变量里面
  • 在定时器里面调用要执行的函数

  

你可能感兴趣的:(javascript)