首页 / JAVASCRIPT / JS的防抖与节流 -- springboot实战电商项目mall4j

JS的防抖与节流 -- springboot实战电商项目mall4j

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS的防抖与节流 -- springboot实战电商项目mall4j，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1170字，纯文字阅读大概需要2分钟。

内容图文

JS的防抖与节流

springboot实战电商项目mall4j （https://gitee.com/gz-yami/mall4j）

什么是防抖？

函数防抖(debounce)： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

什么是节流

**函数节流(throttle): **规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

应用场景

对于函数防抖，有以下几种应用场景：

  • 给按钮加函数防抖防止表单多次提交。
  • 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。

总的来说，适合多次事件一次响应的情况

对于函数节流，有如下几个场景：

  • 游戏中的刷新率
  • DOM元素拖拽
  • Canvas画笔功能

总的来说，适合大量事件按时间做平均分配触发。

函数防抖

function debounce (fn, wait) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn(...args)
    }, wait)
  }

函数节流

function throttle (fn, wait) {
  let timer
  return (...args) => {
    if (timer) { return }
    timer = setTimeout(() => {
      fn(...args)
      timer = null
    }, wait)
  }

小结

  • 防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout
  • 节流：控制流量，单位时间内事件只能触发一次，代码实现重在开锁关锁 timer=timeout; timer=null

springboot实战电商项目mall4j （https://gitee.com/gz-yami/mall4j）

内容总结

以上是互联网集市为您收集整理的JS的防抖与节流 -- springboot实战电商项目mall4j全部内容，希望文章能够帮你解决JS的防抖与节流 -- springboot实战电商项目mall4j所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1010729.html

来源：【匿名】