分类：函数防抖

2021
07-01

如何理解JS函数防抖和函数节流

目录概述1.函数防抖（debounce）2.函数节流（throttle）概述函数防抖和函数节流都是定义一个函数，该函数接收一个函数作为参数，并返回一个添加了防抖或节流功能后的函数。因此可以将函数防抖和函数节流看作是一个函数工厂，负责对传进来的函数进行相应的加工改造，然后产出一个新的带有某种功能的函数。函数防抖是某一时间内只执行一次，而函数节流是间隔时间执行假如有这样一个场景：在某一页面，有一个按钮是"加载更多"，这... 继续阅读 >

2020
10-08

浅析JavaScript 函数防抖和节流

函数防抖和节流都是对高频动作触发回调函数的一个优化，实现方式上有类似之处。先从使用场景做个区分。防抖使用场景：表单输入框校验提交按钮避免重复提交节流使用场景：scroll,mousemove,resize等函数防抖（debounce）表单输入框校验在用户不停的打字输入时并不需要向后台校验文本，只有当用户停下来一定时间后，这时候默认用户已经输入完毕了可以开始向后台提交文本了。表单的提交按钮被用户多次连续点击时，显然并不... 继续阅读 >

2020
10-06

详解JS函数防抖

一、什么是函数防抖       概念：函数防抖（debounce），就是指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会重新计算函数延执行时间。       举个栗子，坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待10秒，此时如果又有人进来（10秒之内重复触发事件），那么电梯就会再多等待10秒。在上述例子... 继续阅读 >

2020
09-27

Vue中函数防抖节流的理解及应用实现

防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。一、函数防抖定义在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。实现原理函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。使... 继续阅读 >