防抖函数和节流函数使用

1.使用场景(防抖函数)

当我们在项目中一段时间内需要反复调用同一个函数，为了提高效率，我们就可以使用防抖函数来减少调用同一个函数的次数，进而提高效率

(比如当我们在渲染详情页，我们需要获得组件挂载完后的组件内容高度，但当详情页中有图片时，虽然组件已挂载完毕，但图片的加载会有一定的延迟，故我们需要调用刷新函数来获得准确的页面内容高度，于是当一张图片加载完，我们就得调用一次刷新函数，这样当图片多的时候，降低了效率，这个时候就需要用到防抖函数来提高效率)

2.代码实现

// 参数func是 （需要反复调用的同一个函数）
// time是传入的毫秒数，指为定时器设置时间
// 这里的变量timer使用了闭包，使得timer的值被保存下来
export function debounce (func, time = 300) {
  let timer = null
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      // 将func的指向调用匿名函数的this指向,这里可以根据实际需要看是否需要改变this指向
      func.apply(this)
    }, time)
  }
}

3.节流函数

节流则是在指定时间内，最多只触发一次函数

a.利用闭包保存上一次函数调用的时间

b.判断当前时间与上一次调用时间的差值是否大于指定时间

function throttle(func,timer = 200){
    let lastTime = null;
    return function(){
      const now = Date.now();
      // 判断是否是第一次调用 或者 两次调用的时间间隔是否超过规定的间隔
      
      if(!lastTime || now - lastTime > timer){
        func.apply(this)
        lastTime = now
      }
    }
  }