手写防抖跟节流函数

节流

节流函数(throttle)就是让事件处理函数(handler)在大于等于执行周期时才能执行,周期之内不执行,即事件一直被触发,那么事件将会按每小段固定时间一次的频率执行。

function throttle(fn, delay = 300) {
  let isThrottling = false
  return function (...args) {
    if (!isThrottling) {
      isThrottling = true
      setTimeout(() => {
        isThrottling = false
        fn.apply(this, args)
      }, delay)
    }
  }
}
let fn=function(name,age){
    console.log(`我叫${name},我今年${age}岁了。`)
}
throttle(fn,400)('zhangsan',40)//我叫zhangsan,我今年40岁了。

防抖

事件响应函数在一段时间后才执行,如果这段时间内再次调用,则重新计算执行时间

function debounce(fn,delay=300){
    let timer =null
    return function(...args){
        clearTimeout(timer)
        timer=setTimeout(()=>{
            fn.apply(this,args)
        },delay)
    }
}
let fn=function(name,age){
    console.log(`我叫${name},我今年${age}岁了`)
}
debounce(fn,500)('张三',18)

你可能感兴趣的:(javascript,开发语言)