js函数节流和函数防抖

概念解释

函数节流: 频繁触发,但只在特定的时间内才执行一次代码

函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

函数节流

函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。

以下是监听页面元素滚动的示例代码：

 1 // 函数节流
 2 var canRun = true;
 3 document.getElementById("throttle").onscroll = function(){
 4     if(!canRun){
 5         // 判断是否已空闲，如果在执行中，则直接return
 6         return;
 7     }
 8 
 9     canRun = false;
10     setTimeout(function(){
11         console.log("函数节流");
12         canRun = true;
13     }, 300);
14 };
15 // 函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。
16 // 如果空闲，则可以正常触发方法执行。
17 // 如果代码正在执行，则取消这次方法执行，直接return。

函数抖动

函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。

只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。

以下还是以页面元素滚动监听的例子，来进行解析：

 1 // 函数防抖
 2 var timer = false;
 3 document.getElementById("debounce").onscroll = function(){
 4     clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
 5 
 6     timer = setTimeout(function(){
 7         console.log("函数防抖");
 8     }, 300);
 9 };
10 // 函数节流的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
11 // 如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
12 // 如果计时完毕，没有方法进来访问触发，则执行代码。