IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    JavaScript - 防抖和节流

    Johon发表于 2022-10-02 00:00:00
    love 0
    #### 防抖 - debounce - 函数防抖: 在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。 - 主要使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。 **具体实现** ```javascript title="防抖" function debounce(fn, wait) { var timer = null return function () { var context = this, args = arguments // 如果此时存在定时器的话,则取消之前的定时器重新记时 if (timer) { clearTimeout(timer) timer = null } // 设置定时器,使事件间隔指定事件后执行 timer = setTimeout(() => { fn.apply(context, args) }, wait) } } ``` #### 节流 - throttle - 函数节流: 规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。 - 可以使用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。 **具体实现** ```javascript title="节流" function throttle(fn, delay) { var preTime = Date.now() return function () { var context = this, args = arguments, nowTime = Date.now() // 如果两次时间间隔超过了指定时间,则执行函数。 if (nowTime - preTime >= delay) { preTime = Date.now() return fn.apply(context, args) } } } ```


沪ICP备19023445号-2号
友情链接