Skip to content

防抖和节流

防抖

js
// 连续触发,只执行一次
/** 
 * fn 要执行的回调
 * wait 延时的时间
 * promptly 是否立即执行
 */
let times = null
function Debounce(fn, wait = 200, promptly = false) {
  if (times !== null) clearTimeout(times)
  if (promptly) { // 多次触发只执行第一次
    let callNow = !times
    times = setTimeout(() => {
      times = null
    }, wait)
    if (callNow) typeof fn === 'function' && fn()
  } else { // 多次触发只执行最后一次
    times = setTimeout(() => {
      typeof fn === 'function' && fn()
    }, wait)
  }
}
Debounce( () => { console.log('test') }, 1000, true )

节流

js
// 触发后,需等待 wait 时间冷却
/**
 * fn 要执行的回调
 * wait 冷却时间
 * promptly 是否立即执行
 */
let times, flag;
function Throttle(fn, wait = 200, promptly = false) {
  if (promptly) { // 立即执行
    if (!flag) {
      flag = true
      typeof fn === 'function' && fn()
      times = setTimeout(() => {
        flag = false
      }, wait)
    }
  } else {  // 延迟执行
    if (!flag) {
      flag = true
      times = setTimeout(() => {
        flag = false
        typeof fn === 'function' && fn()
      }, wait)
    }
  }
}
Throttle( () => { console.log('test') }, 1000, true )