JS的防抖与节流 -- springboot实战电商项目mall4j
2021/4/14 10:29:12
本文主要是介绍JS的防抖与节流 -- springboot实战电商项目mall4j,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-18Python编程入门:面向对象编程基础
- 2024-10-18数据结构入门指南:轻松掌握基础知识
- 2024-10-18数据库技术入门指南
- 2024-10-18初学者指南:轻松入门面向对象编程
- 2024-10-18数据结构入门教程:轻松掌握基础概念与应用
- 2024-10-18数据库学习:从入门到实践的简单教程
- 2024-10-18面向对象开发学习:初学者指南
- 2024-10-18软件工程学习:入门与初级教程
- 2024-10-18软件设计师考试大纲详解与备考指南
- 2024-10-18软考培训机构的选择与入门指南