粗解javascript中的函数节流和函数防抖

参考资料

感觉这里面讲的挺详细的:
https://www.cnblogs.com/walls/p/6399837.html

我自己的理解

1.函数节流

当事件被频繁触发时,在一定的时间内(假设时300ms)只会执行一次事件内需要执行的任务,也就是说,假如你在600ms内触发了多次这个事件,实际上它只会执行两次任务。

1.1示例代码

函数节流多数会在onresize,scroll,mousemove ,mousehover时候会用到。因为这些事件是会高频触发的事件。以下是示例代码:

// 函数节流 监听页面元素滚动
var canRun = true;
document.getElementById("throttle").onscroll = function(){
	if(!canRun){
		// 判断是否已空闲,如果在执行中,则直接return
		return;
	}

	canRun = false;
	setTimeout(function(){
		console.log("函数节流");
		canRun = true;
	}, 300);
};

//函数节流 监听页面元素鼠标移动
var flag = true;
	$('.recruit li').on('mousemove',function(){
		if(flag == true){
		    flag = false;
		    var timer = setTimeout(function(){
				flag = true;
				console.log('函数节流');
			},300);
		}
		 
	});
1.2要点

函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。
 如果空闲,则可以正常触发方法执行。
 如果代码正在执行,则取消这次方法不执行。

2.函数防抖

当事件被频繁触发,只有在触发间隔时间大于某个时间(假设300ms)时,任务才会执行,也就是说,假如你不断触发一个事件并且每次间隔小于300ms(假设)时,事件内的任务是不会被执行的,这时候你停下来不再触发的话,就会执行一次这个任务,在你整个触发过程中,实际任务只被触发了一次。

2.1示例代码

应用场景:判断输入的用户名是否规范,输入框输入之后会调用接口,检测输入信息是否规范。但是,因为频繁调用接口不太好,所以我们在代码中使用防抖功能,只有在用户输入完毕的一段时间后,才会调用接口,获取输入完毕时输入框的信息,然后检测是否规范。
以下是示例代码:

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
	clearTimeout(timer); // 清除未执行的代码,重置回初始化状态

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

函数防抖的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
 如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。
 如果计时完毕,没有方法进来访问触发,则执行代码。

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

为什么需要函数节流和函数防抖

此段节选自link

前端开发过程中,有一些事件或者函数,会被频繁地触发(短时间按内多次触发),最常见的例如,onresize,scroll,mousemove ,mousehover 等,这些事件的触发频率很高,不做限制的话,有可能一秒之内执行几十次、几百次,如果在这些函数内部执行了其他函数,尤其是执行了操作 DOM 的函数(浏览器操作 DOM 是很耗费性能的),那不仅会造成计算机资源的浪费,还会降低程序运行速度,甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

除此之外,重复的 ajax 调用不仅可能会造成请求数据的混乱,还会造成网络拥塞,占用服务器带宽,增加服务器压力,显然这个问题也是需要解决的。

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读