函数防抖和节流

左手的ㄟ右手 2023-06-10 14:28 13阅读 0赞

#### 函数防抖和节流是用来干什么的？ ####

*  是优化高频率执行js代码一种手段。
 *  在js中有一些事件在触发时会不断调用绑定在事件上的回掉函数，极大地浪费资源，降低性能。
 *  上述事件有resize、scroll、mousemove、mouseover、input输入框的keypress事件等
 *  所以为了优化体验，需要对这类事件进行调用次数的限制。

#### 1. 防抖 ####

定义：  
指触发事件后在n秒内函数只执行一次，如果在n秒内又触发事件，则会重新计算函数执行时间  
（计时清零）

防抖分为非立即执行版和立即执行版。

*  所谓非立即执行就是触发事件后，函数不会立即执行，而是在n秒后执行，如果在n秒内又触发了事件，则会重新计算函数执行时间（即延迟执行）

代码如下：

*  立即执行就是触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数效果

代码如下：

*  在开发的过程中我们需要根据不同的场景来决定使用哪种防抖函数。结合版代码如下

// immediate 表示是否立即执行
    function debounce(func,wait,immediate){
    	let timer;
    	return function(){
    		let _this = this;
    		let args = arguments;
    		if(timer) {
    			clearTimeout(timer);
    		}
    		if(immediate) {
    			let callNow = !timer;
    			timer = setTimeout(() => {
    				timer = null;
    			}, wait);
    			if(callNow){
    				func.apply(_this,args);
    			}
    		} else {
    			timer = setTimeout(() => {
    				func.apply(_this, args);
    			}, wait)
    		}
    	}
    }

#### 2. 节流（throttle） ####

定义：  
节流是指连续触发事件在n秒中只执行一次。

节流的两种实现方式：

*  时间戳版(立即执行)
 *  函数是在时间段开始时候执行  
    代码如下：

*  定时器版（非立即执行）
 *  函数是在时间段结束后执行  
    代码如下：

依然结合两种方式整合函数节流，代码如下：

// type=1时间戳版 type=2定时器版
    function throttle(func,wait,type){
    	if(type === 1){
    		var previous = 0;    //  注意：这儿使用var而不使用let的原因是let会形成块级作用域，外面访问不到
    	} else if(type === 2) {
    		var timer;
    	}
    	return function(){
    		let _this = this;
    		let args = arguments;
    		if(type === 1){
    			let now = Date.now();
    			if(now - previous > wait) {
    				func.apply(_this,args);
    				previous = now;
    			}
    		}else if(type === 2) {
    			if(!timer) {
    				timer = setTimeout(() => {
    					timer = null;
    					func.apply(_this,args);
    				},wait)
    			}
    		}
    	}
    }