节流防抖

防抖: 在规定时间后执行函数,若执行前再次触发则刷新计时器
举例: 鼠标移出弹出菜单后菜单一秒后消失,若鼠标再次移入则继续显示直到离开时再计时防止闪烁抖动

节流:在固定时间内只能执行一次该函数
举例:商品页面滚动到底部获取新的一页数据,在一秒内只获取一次以达到节省流量

节流与防抖函数

均为接受两个参数,第一个参数为防抖节流的函数,第二个参数调节时间 (默认时间为1000)

//防抖回调 默认一秒
export function debounce(func, wait = 1000){
   let timer = null;
   return () => {
      if (timer !== null) {
         clearTimeout(timer)
      }
      timer = setTimeout(func, wait)
   }
}

//节流回调 默认一秒
export function throttle(func, wait =  1000){
   let lastTime = 0;
   return () => {
      const nowTime = Date.now();
      if (nowTime - lastTime > wait) {
         func.call("", lastTime);
         lastTime = nowTime;
      }
   }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 防抖函数 1.1 防抖定义: 函数防抖(debounce):当持续触发事件时(例如mousemove),一定...
    子皙丶阅读 402评论 0 8
  • 闭包 由于节流和防抖函数的实现都用到了闭包,所以在了解节流和防抖之前我先简单介绍下什么是闭包。 由于js代码在一个...
    _章鱼小丸子阅读 796评论 0 0
  • 闭包 由于节流和防抖函数的实现都用到了闭包,所以在了解节流和防抖之前我先简单介绍下什么是闭包。 由于js代码在一个...
    喵咪_f9a1阅读 286评论 0 0
  • 定义 在JS里,有一些事件是很容易频繁触发的,比如窗口的resize、scroll、鼠标的onmousemove等...
    瑞哦利阅读 318评论 0 0
  • 今天在某勾上收到一家公司的面试请求,但要回答几个问题,第一个就是问防抖和节流,WTF?这就触及到我知识的盲区了,没...
    大怪兽迪迦阅读 301评论 0 1