用js写出函数防抖和节流

• 2021-01-02
  前段时间学到了几个知识点~ 一块整理出来好了，现在多发一点给以后备用hh

一、js中的函数防抖

1. 什么是函数防抖

函数防抖（debounce）就是指触发事件后，在n秒内函数只能执行一次，如果事件在n秒内后被触发了一次，则重新计算函数执行时间。

2. 为什么需要函数防抖

前端事件中（如onresize，scroll，mousemove，mousehover等）会被频繁触发，不做限制可能一秒之内执行几十上百次，如果在这些函数内部执行了其他方法，尤其是操作了DOM元素，那么不仅浪费计算机资源，还会降低程序运行速度，甚至会造成浏览器卡死，崩溃。
另外，重复调用ajax不仅会造成数据关系的混乱，还会造成网络拥趸，增加服务器压力。

3. 防抖的应用场景

• 用户在输入框中连续输入一段字符串，只在输入完成后去执行最后一次的ajax请求，可以有效节约请求次数。
• window的resize，scroll事件，防抖指让其触发一次

4. 防抖的实现原理

防抖函数的要点，是需要一个setTimeout来辅助实现，延迟运行需要执行的代码，如果方法再次触发，则把上次记录的延迟执行代码清除掉，重新开始计时，若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。

5. 防抖的代码实现

function debounce(fn, wait){
	var timer = null;
	return function(){
		if(timer !== null){
			clearTimeout( timer );
		}
		timer = setTimeout(fn, wait);
	}
}
function func(){
	console.log("执行方法");
}
window.addEventListener('resize', debounce(func, 1000));

二、js中的节流

1. 节流和防抖的区别

实用防抖的结果是，在限定时间内，不断触发事件，理论上就永远不会执行后续的方法。
而防抖则是，计时不断触发事件，也能在某个时间间隔之后给出反馈。

2. 节流的实现原理

节流的原理非常简单，我们可以设计一种类似控制阀门一样定期开放的函数，也就是说，让函数执行一次之后，在某个时间段内暂时失效，过了这个时间段之后再重新激活。

3. 节流的应用场景

• 鼠标连续不断的触发某事件（如点击、滑动），只在单位时间内触发一次。
• 在页面的无限加载场景下，用户滚动页面时，每隔一段时间发送一次ajax请求，而不是在用户停下滚动页面时采取请求数据

4. 节流的代码实现

节流可通过两种方法来实现，一个是定时器（类似于防抖），另一个是时间戳。

• 利用定时器实现节流

function throttle(fn, wait){
	var timer = null;
	return function(){
		if(!timer){
			timer = setTimeout(function(){
				fn();
				timer = null;
			}, wait);
		}
	}
}
function func(){
	console.log("执行方法");
}
window.addEventListener('resize', throttle(func, 1000));

• 利用时间戳实现节流

function throttle(fn, wait){
	var prev = Date.now();
	return function(){
		var now = Date.now();
		if(now - prew >= wait){
			fn();
			prev = now;
		}
	}
}
function func(){
	console.log("执行方法");
}
window.addEventListener('resize', throttle(func, 1000));

三、函数的传参问题

上面的代码有个小问题，就是我希望执行的方法没办法传参，下面是解决方法：

//在防抖或节流的 return方法内部
var context = this;
var args = arguments;
//将 fn()更改为
fn.apply(context, args);