JS编写防抖和节流函数

蔚落 2022-11-21 01:09 149阅读 0赞

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

### 一个例子 ###

通常，我们想要监听窗口的滚动事件，去做一些处理，我们可以直接为元素绑定onscroll事件，下面我们编写一个例子，来观察滚动事件触发的频率

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>防抖与节流</title>
    	</head>
    	<body>
    		<div id="app" style="height:3000px;width: 100%;"></div>
    		<script>
    		    document.body.onscroll = function() {
    				console.log('onscroll');
    			};
    		</script>
    	</body>
    </html>

滚动元素，观察控制台输出，在短短的几百毫秒内触发了近百次，执行频率太高了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70][]

### 存在的问题 ###

加入我们需要监听滚动事件，去做一些复杂的计算，或者UI的重排或重绘，对计算机性能会是非常大的考验，甚至可能会把浏览器跑挂。

### 防抖（debounce） ###

基于上述场景，首先提出第一种思路：

在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms

1.  如果在200ms内没有再次触发滚动事件，那么就执行函数
2.  如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>防抖与节流</title>
    		<script type="text/javascript">
    			/**
    			 * @desc 函数防抖
    			 * @param func 函数
    			 * @param wait 延迟执行毫秒数
    			 * @param immediate true 表立即执行，false 表非立即执行
    			 */
    			function debounce(func, wait, immediate) {
    			    let timeout;
    			
    			    return function () {
    			        let context = this;
    			        let args = arguments;
    			
    			        if (timeout) clearTimeout(timeout);
    			        if (immediate) {
    			            var callNow = !timeout;
    			            timeout = setTimeout(() => {
    			                timeout = null;
    			            }, wait)
    			            if (callNow) func.apply(context, args)
    			        }
    			        else {
    			            timeout = setTimeout(function(){
    			                func.apply(context, args)
    			            }, wait);
    			        }
    			    }
    			}
    		</script>
    	</head>
    	<body>
    		<div id="app" style="height:3000px;width: 100%;"></div>
    		<script>
    		    document.body.onscroll = debounce(function() {
    				console.log('onscroll');
    			}, 200)
    		</script>
    	</body>
    </html>

重新运行并滚动元素，查看控制台，停止滚动200后才输出了一次scroll，假如immediate设置为true，则在创建debounce函数时会立即输出一次

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1][]

### 节流（trolttle） ###

我们也可以让函数每间隔一定时间执行一次，而不需要等待动作停止后一定时间才去执行。

**所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。**节流会稀释函数的执行频率。

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>防抖与节流</title>
    		<script type="text/javascript">
    			/**
    			 * @function: throttle
    			 * @param: {Function} func 要执行的函数
    			 * @description: 当函数在短时间内多次触发时，做节流，间隔delay时长再去执行
    			 * @author: hruomei
    			 * @date: 2020-10-29 10:38:06
    			 * @version: V1.0.0
    			 */
    			function throttle(func, delay) {
    				let timer = null, // 用来保存setTimeout返回的值
    					startTime = Date.now(); // 创建节流函数的时间
    			
    			    // 返回一个函数
    				return function() {
    					let curTime = Date.now(), // 返回的这个函数被调用的时间
    						remaining = delay - (curTime - startTime), // 设定的delay与[上一次被调用的时间与现在的时间间隔]的差值
    						context = this, // 上下文对象
    						args = arguments; // 返回的这个函数执行时传入的参数
    			
    			        // 首先清掉定时器
    					clearTimeout(timer); 
    			
    			        // // 假如距离上一次执行此函数的时间已经超过了设定的delay，则执行
    					if (remaining <= 0) { 
    						func.apply(context, args);
    						startTime = Date.now(); // 重置最后执行时间为现在
    			
    			        // 否则，等到间隔时间达到delay时，执行函数
    					} else {
    						timer = setTimeout(() => {
    			                func.apply(context, args);
    			            }, remaining);
    					}
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="app" style="height:3000px;width: 100%;"></div>
    		<script>
    		    document.body.onscroll = throttle(function() {
    				console.log('onscroll');
    			}, 200)
    		</script>
    	</body>
    </html>

查看控制台，会发现，每间隔200s输出了一次

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 2][]

### 应用场景 ###

*  debounce
    
     *  search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
     *  window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
 *  throttle
    
     *  鼠标不断点击触发，mousedown(单位时间内只触发一次)
     *  监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
     *  页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70]: /images/20221120/5781085fa399457eb4f6f704f3a914b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/ba8a2269bdcb4b91b5809fcd3e2d860a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201029140628863.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ=,size_16,color_FFFFFF,t_70