js节流实现，js截流函数

如何在JavaScript里防止事件函数的高频触发和调用

此时我们可以采用 throttle（节流） 和 debounce（防抖） 的方式来减少调用频率，提高性能的同时又不影响实际效果。实现方式： 每次触发事件时，如果当前有等待执行的延时函数，则直接return。

）节流概念：函数的节流就是预定一个函数只有在大于等于执行周期时才会执行，周期内调用不会执行。好像一滴水只有积攒到一定重量才会落下一样。

cancelBubble（HTML DOM Event 对象属性） ：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。stopPropagation（HTML DOM Event 对象方法）：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。

主要应用场景有：scroll、touchmove 防抖概念(Debounce)抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。

我们是自定义事件，不需要像原生事件一样指定是冒泡阶段触发还是捕获阶段触发，也不需要像jQuery里一样可以额外指定那些元素触发。

JS篇(防抖/节流)

1、函数的节流与防抖就是为了解决类似需求而产生的。1）节流概念：函数的节流就是预定一个函数只有在大于等于执行周期时才会执行，周期内调用不会执行。好像一滴水只有积攒到一定重量才会落下一样。

2、React合成事件官方文档所以在用防抖或节流函数封装时，异步方式访问事件对象出现问题。

3、实现方式： 每次触发事件时，如果当前有等待执行的延时函数，则直接return。区别 ： 节流函数 不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而 防抖函数 只是在最后一次事件后才触发一次函数。

函数防抖与函数节流是什么原理?

函数防抖和函数节流是两种优化高频率执行js代码的手段。在事件被触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

总结： 函数防抖 ：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。防抖和节流的作用都是防止函数多次调用。

原理很简单：就像一个类似控制的阀门，我们只需要控制在时间间隔后开启关闭。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com