JsUtils

此页面存放一些常用的 JavaScript 工具函数, 以便于在项目中使用.

一、节流

节流函数是指在一定时间内只能触发一次事件, 如果在规定时间内再次触发事件, 则不会执行, 直到规定时间过后才能再次触发.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * 节流函数
 * @param {Function} fn 需要节流的函数
 * @param {Number} delay 节流时间
 * @returns {Function} 节流后的函数
 */
const throttle = (fn: () => void, delay: number) => {
  let flag = true
  return (...args: any[]): void => {
    if (!flag) return
    flag = false
    setTimeout(() => {
      fn.apply(this, args)
      flag = true
    }, delay)
  }
}

二、防抖

防抖函数是指在一定时间内只能触发一次事件, 如果在规定时间内再次触发事件, 则会重新计时, 直到规定时间过后才能再次触发.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * 防抖函数
 * @param {Function} fn 需要防抖的函数
 * @param {Number} delay 防抖时间
 * @returns {Function} 防抖后的函数
 */
const debounce = (fn: () => void, delay: number) => {
  let timer: NodeJS.Timeout | null = null
  return (...args: any[]): void => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}