【总结】防抖与节流

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6

本文详细讲解了防抖和节流两种常见的前端性能优化技术，通过实例展示了如何使用setTimeout和clearTimeout实现防抖，以及通过定时检查和延迟执行来控制节流。适合理解JavaScript回调函数和时间间隔控制的开发者。

防抖

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行
如果在同一个单位时间内某事件被触发多次，只有一次能生效
多次触发事件，但是响应事件只会触发最后一次，将多次操作合并为一次进行
防抖操作
- 触发事件
- setTimeout
- clearTimeout

		// 防抖操作
		function debounce(fn,delay){
			let timer;
			return function(){
				// 考虑this和参数问题
				let context = this;
				let args = arguments;
				
				if(timer){
					clearTimeout(timer)
				}
				timer = setTimeout(function(){
				    // 使用apply 将函数的this指向回原来的
					fn.apply(context,args)
				},delay)
			}
		}

节流

设置时间间隔在规定的时间间隔内进行的操作都被忽视掉
超出时间间隔之外才能进行操作
事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时

节流操作
- 触发事件
- 执行任务
- 设置时间间隔
  - 时间间隔内触发事件行为就取消掉
  - 时间间隔后执行触发事件设置时间间隔

根据页面大小的变化改变颜色

方法一

	// 节流
	function throttle(fn,delay){
		let timer;
		return function(){
			let context =this
			let args = arguments
			if(timer){
				return;
			}
			timer = setTimeout(function(){
				fn.apply(context,args);
				timer = null;
				},delay);
			}
	}

方法二

	// 设置时间戳
	function throttle(fn,delay){
		let pre = 0;
		return function(){
			// 获取当前时间
	    	let now = new Date()
	    	// 考虑this指向和参数问题
	        let context = this
	        let args = arguments
		    // 判断时间间隔是否已经大于延迟时间
		    if(now - pre > delay){
	       		// 已经超过延迟时间 执行函数
 	       		fn.apply(context,args)
 	       		// 重置事件开始时间
	        	pre = now
			}
		}
	}

方法三

	// 设置节流阀
	const throttle = (fn, delay) => {
	    let flag = true;
	    return function () {
	        const context = this;
	        const args = arguments;
	        if (flag) {
	            flag = false;
	        }
	        timer = setTimeout(() => {
	            fn.apply(context, args);
	            flag = true;
	        }, delay);
	    }
	}