深入理解函数节流与函数防抖

最新推荐文章于 2021-06-17 21:55:50 发布

weixin_33967071

最新推荐文章于 2021-06-17 21:55:50 发布

阅读量186

点赞数

文章标签：面试

原文链接：https://juejin.im/post/5c84a3b76fb9a049b82b464f

版权

在人生的第一个面试，第一个问题就是面试官问项目遇到的难点以及怎么解决的。我说了自己是如何处理函数节流，结果说的并不是很满意。所以，我决定重新总结一下函数节流与防抖。

深入理解概念

throttle-函数节流：我们希望函数在以一个可以接受的频率重复调用,从而减少函数的执行频率提高网页性能。

debounce-函数防抖：我们希望函数只会调用一次，即使在这之前反复调用它，最终也只调用一次。

下面我们来看一个栗子...

  
  // 普通滚动
	document.getElementById("noscroll").onscroll = function(){
	console.log("普通滚动");
	};

复制代码

除了滚动事件此类问题还有：

1.resize监听浏览器窗口大小 2. 鼠标的点击事件 mouseup, mousedown,mousemove 3.键盘的keyup, keydown， input事件
复制代码

函数防抖原理

如果方法多次被触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。如果计时完毕，没有方法进来访问触发，则执行代码。

这个方法的作用是监听ID为debounce元素的滚动事件进入滚动事件方法体的时候，做的第一件事就是清除上次未执行的setTimeout。而setTimeout的引用id由变量timer记录。

所以这里直接执行clearTimeout即可。然后，将需要执行的代码放入setTimeout中，再返回setTimeout引用给timer缓存。如果倒计时300ms以后，还没有新的方法触发滚动事件，则执行setTimeout中的代码。

函数防抖的实现重点，就是巧用setTimeout做缓存池，而且可以轻易地清除待执行的代码。

下面是函数防抖代码

	// 函数防抖
	var timer = false;
	document.getElementById("debounce").onscroll = function(){
	clearTimeout(timer); // 每次调用滚动事件都会将前一次的timer清空，确保只执行一次

	timer = setTimeout(function(){
	console.log("函数防抖");
	}, 300);
	};			
}

复制代码

函数防抖的应用场景：最常见的是用户注册时候的手机号码验证和邮箱验证。只有等用户输入完毕后，才需要检查格式是否正确，如果不正确，再弹出提示语。

函数节流原理

// 函数节流
var timer = true;
document.getElementById("throttle").onscroll = function(){
    if(!timer){
        // 判断是否已空闲
        //代码进行到这儿则是在执行中，则直接return
        return;
    }

   timer = false;
    setTimeout(function(){
        console.log("函数节流");
        timer = true;
    }, 300);
};
复制代码