Published on

JavaScript函数节流防抖

Authors
  • avatar
    Name
    lcorz
    Twitter

函数防抖： 将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

export function debounce(fn, interval = 300) {
    let timer = null;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, interval);
    };
}

函数节流： 使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。说白了函数节流所做的工作就是每隔一段时间去执行一次原本需要无时不刻地在执行的函数

export function throttle(fn, waitTime = 1000){
  let lastTime = null
  return function () {
    let startTime = + new Date()
    if (startTime - lastTime > waitTime || !lastTime) {
      fn()
      lastTime = startTime
   }
 }
}

ps: 这两个东西主要的作用就是减少请求和函数执行的次数 避免一些性能以及不必要的麻烦