js 异步 防抖

1,473 阅读1分钟
// 使用场景:
// 例如:vue actions 在一定时间内如果是同一个请求只发送一次请求,且都可获取返回的数据
/**
 *
 * @param func 需要执行的函数
 * @param 延迟时间(毫秒)
 * @returns {Function}
 */
function promiseDebounce (func, wait) {
  let loading = false
  let promise = null
  return function () {
    if (loading && promise) {
      return promise
    }
    loading = true
    setTimeout(() => {
      loading = false
    }, wait)
    const context = this
    const args = arguments
    promise = func.apply(context, args)
    return promise
  }
}
// 例:
const test = promiseDebounce(function () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('加载完成')
      resolve(222)
    }, 2000)
  })
}, 1000)

// 执行第一次 会打印 加载完成,能获取 res
test().then(res => {
  console.log(res)
})

// 不会打印 加载完成,能获取 res
setTimeout(() => {
  test().then(res => {
    console.log(res)
  })
}, 500)


// 超过设置的 1s 会再次 打印 加载完成,能获取 res
setTimeout(() => {
  test().then(res => {
    console.log(res)
  })
}, 1500)