JS节流、防抖

节流就是「技能冷却中」

const 闪现 = ()=>{
  console.log('闪现');
}


const throttle = (fn, time) =>{
  let 冷却中 = false

  return (...args)=>{
    if(冷却中){
      return
    }
    fn(...args)
    冷却中 = true

    setTimeout(()=>{
      冷却中 = false
    }, time)
  }
}

// 优化
const throttle2 = (fn, time) =>{
  let timer = null

  return (...args)=>{
    if(timer){
      return
    }
    fn(...args)

    timer = setTimeout(()=>{
      timer = null
    }, time)
  }
}



const xx = throttle(闪现, 10 * 1000)

防抖就是「回城被打断」

const debounce = (fn, time) => {
  let 回城计时器 = null
  return (...args) => {
    if (回城计时器 !== null) {
      clearTimeout(回城计时器) // 打断回城
    }
    // 重新回城
    回城计时器 = setTimeout(() => {
      fn.call(undefined, ...args) // 回城后调用 fn
      回城计时器 = null
    }, time)
  }
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 函数节流 在一段时间内,只能触发一次函数,如在这段时间内多次触发,也只能执行一次。 举个栗子🌰我们在打王者时,当英...
    浪味仙儿啊阅读 331评论 0 2
  • 节流 节流就是针对调用频率高的函数设置冷却时间,防止过于频繁的调用引起的浏览器性能问题以及ajax调用问题。 防抖...
    TmsGirafee阅读 299评论 0 0
  • 事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器...
    oWSQo阅读 445评论 0 6
  • 前言 节流与防抖主要是为了解决我们实际开发场景中对于一些高频触发的事件,响应跟不上触发而导致的一系列问题。 名词解...
    ZT_Story阅读 526评论 0 3
  • 现在大多数项目都在用React或者Vue,再配套一个UI库,快速搭建一个系统,的确方便了日常开发工作。我们在拥抱框...
    勇敢快乐的风筝阅读 326评论 0 0

友情链接更多精彩内容