防抖&节流

节流:按单位时间段(delay)去稀释事件

function throttle(fn, delay) {
  let firstTime = true;
  let timer = null;
  return function() {
    if (firstTime) {
      fn.apply(this, arguments);
      firstTime = false;
      return
    }
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}

防抖:在单位时间间隔,只触发最后一次

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

推荐阅读更多精彩内容

  • 防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所...
    TurnHug阅读 3,907评论 0 2
  • 在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负...
    陈光环_18阅读 1,630评论 0 0
  • 在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负...
    iqing2012阅读 4,210评论 0 1
  • 在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负...
    为光pig阅读 2,695评论 0 3
  • 在上周的开发中,又遇到点击保存多次请求数据重复的问题,所以下来学习了一下js的防抖和节流。通过学习了解到,在进行窗...
    any_5637阅读 3,008评论 0 2

友情链接更多精彩内容