防抖和截流

固定时间段内的多次触发将被重置为单次触发,防抖就是禁止频繁触发,例如:浏览器滑动,触发频率大约是1次/16ms(刷新率60FPS ,表示的是每秒钟画面更新次数),防抖就是控制滑动触发频率,每次防抖都延长触发时间。

window.onscroll = delay(fn,1000)
function fn(){console.log(123)}
function delay(fn,time){
  let timeSet;//利用闭包存储定时器数据
  return function(){
    clearTimeout(timeSet)
    timeSet = setTimeout(fn,time)
  }
}

截流就是固定频率的触发。

window.onscroll = delay(fn,1000)
function fn(){console.log(123)}
function delay(fn, time){
  let setTime;//利用闭包存储定时器数据
  let lock;//利用闭包存储锁
  return function (){
    if(lock){
      return;
    }else{
      setTime = setTimeout(function(){
        fn()
        lock = false;
      },time)
      lock = true;
    }
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 由来 如果短时间以很高频率触发 scroll 、resize、click 等事件(事件中涉及到大量的位置计算、DO...
    my木子阅读 1,449评论 0 1
  • 前言 现在发现面试时候考察的防抖截流这个问题考察的东西不只这么简单了 面试官会结合各种应用案例去考察,比如模糊搜索...
    野蛮生长_ed2e阅读 2,113评论 0 4
  • 防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。 截流...
    小强流浪记阅读 265评论 0 0
  • 一、前言 在前端开发中会遇到一些频繁的事件触发,比如:window 的 resize、scrollmousedow...
    DY_alley阅读 2,178评论 0 0
  • 防抖 运行方式:在第一次触发事件时,不立即执行函数,而是给出一个期限值比比如200ms,1,如果在200ms内没有...
    追梦_3c87阅读 1,813评论 0 0