利用async/await 实现防抖节流功能。

代码

debounce.js

let timer = 0

function debounce(delay){
  return new Promise((resolve,reject)=>{
    clearTimeout(timer)
    timer = setTimeout(()=>{
      resolve()
    },delay)
  })
}

module.exports = debounce

throttle.js

let timer = 0

function throttle(delay){
  return new Promise((resolve,reject)=>{
    if(timer===0){
      timer = setTimeout(()=>{
        resolve()
        timer = 0
      },delay)
    }
  })
}

module.exports = throttle

需要注意的是代码实现中将timer放到了函数外部，这会导致不管在哪使用延迟函数，对应限制的定时器都是同一个。解决方法也很简单将变量作为闭包即可。

function debounce(delay){
  let timer = 0
  return function(){
    return new Promise((resolve,reject)=>{
      clearTimeout(timer)
      timer = setTimeout(()=>{
        resolve()
      },delay)
    })
  }
}

执行一次就会创建一个独立的timer，并返回延迟函数

const delay = debounce(200)

(async()=>{
  await delay()
  //code...
})()

示例

example.js

const debounce = require('./debounce')

const run= async()=>{
  await debounce(1000)
  console.log('code...')
}
run()
run()
run()
setTimeout(()=>{
  run()
},1100)

// print ==========
// code...
// code...

const throttle = require('./throttle')

let lastTime = new Date()
const run= async()=>{
  await throttle(1000)
  console.log(new Date() - lastTime)
  lastTime = new Date()
}
// 利用定时器模拟重复行为
function timer(){
  setTimeout(()=>{
    run()
    timer()
  },200)
}
timer()