Js的简单防抖和节流

95 阅读 0 评论 63 点赞

我是靠谱客的博主开放水杯，这篇文章主要介绍Js的简单防抖和节流，现在分享给大家，希望可以做个参考。

自建博客文章链接：http://www.heblogs.cn/articleDetails/60f839acfcae932a86eeafcb
防抖是将多次执行变为最后一次执行
节流是将多次执行变为每隔一段时间执行

知识范围：前端性能优化
业务场景：日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）

防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。以下为代码示例

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
	/*
	* 封装一个防抖函数
	* fn [function] 需要防抖的函数
	* delayTime[number] 毫秒，防抖期限值
	*/
	function debounce(fn,delayTime){
	//初始化一个定时器
    let timer = null;
    return function() {
     	//如果当前计时存在且又触发了相同事件。那么关闭当前的计时
        if(timer){ clearTimeout(timer); }
        //否则打开定时器并设置延时时间既防抖期限值
        timer = setTimeout(fn,delayTime);
    	}
	}
	//滚动测试函数
	function showTop() {
	    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	　　console.log('滚动条位置：' + scrollTop);
	}
	//使用封装好的防抖函数
	window.onscroll  = debounce(showTop,200);

节流

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
	function throttle(fn,delayTime){
	//初始化一个valid开关
		let valid = true;
		return function() {
		   //如果valid为false 直接返回 
		   if(!valid){ return false  } 
		   //如果valid为true 延时器打开
			valid = false
			setTimeout(() => {
				fn();
				valid = true;
			}, delayTime)
		}
	}
	//滚动测试函数
	function showTop  () {
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	　　console.log('滚动条位置：' + scrollTop);
	}
	//使用封装好的节流函数
	window.onscroll = throttle(showTop,200)