JS防抖和节流

开心市民小杨儿

已于 2022-03-07 17:16:56 修改

阅读量334

点赞数

分类专栏：笔记文章标签： javascript 前端

于 2022-03-07 17:08:33 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43743402/article/details/123331932

版权

笔记专栏收录该内容

41 篇文章

订阅专栏

一、防抖
1、概念：当用户触发时间过于频繁，只要最后一次事件的操作

//实现：input框输入0.5秒后，控制台进行打印input输入内容
//这样就实现了防抖的预期
<html>
<style>
<input type="text">
</style>
<scprit>
let inp = document.querySelector("input");
let t = null;
inp.oninput = function(){
	//如果这个function事件不是最后一次触发，则给这些事件clear掉
	if(t ! == null){
		clearTimeout(t);
	}
	//如果function事件是最后一次触发，则执行console的操作（即业务代码）
	t = setTimeout(() => {
		//业务代码
		console.log(this.value)
	},500)	
}
</sprit>
</html>

2、上面代码中业务逻辑和防抖混杂到一起，非常难维护，因此我们对上面代码进行更改。将防抖和业务代码分离开。
例子：（使用闭包封装一个防抖的方法进行改进）

//实现：input框输入0.5秒后，控制台进行打印input输入内容
//这样就实现了防抖的预期
<html>
<style>
<input type="text">
</style>
<scprit>
let inp = document.querySelector("input");
//调用防抖这个方法
inp.oninput = debounce(function(){
	console.log(this.value)
},500)
//定义一个防抖方法
//fn为形参，它传进来的是真正的业务逻辑
//同时形成闭包，return后面为内部函数，使用了外部函数变量t，debounce为外部函数
function debounce(fn,delay){
	let t = null;
	return function(){
		if(t ! == null){
			clearTimeout(t);
		}
		t = setTimeout(() => {
			//业务代码,fn();调用业务代码
			//使用call改变this指向，
			//从而使上面console.log(this.value)中的this指向input
			fn.call(this);
		},delay)	
	}
}
</sprit>
</html>

二、节流
1、节流的作用：控制高频事件执行次数

<html>
<style>
body{height:2000px};
</style>
<script>
//防抖是指执行最后一次
//节流是指控制执行次数
let flag = true;
window.onscroll = function(){
	if(flag){
		steTimeout(() => {
			console.log(123)
			//凡是执行setTimeout函数之后都将flag置为true
			//达到一秒只能执行两次setTimeout	
			flag = true
		},500)
		
	}
	flag = false;
}
</script>

2、和防抖同样，对上面代码进行封装

<html>
<style>
body{height:2000px};
</style>
<script>
//防抖是指执行最后一次
//节流是指控制执行次数
//调用节流这个方法
window.onscroll = throttle(function(){
		console.log(123)
},500)
function throttle(fn,delay){
	let flag = true;
	return function(){
		if(flag){
		steTimeout(() => {
			fn.call(this);
			//凡是执行setTimeout函数之后都将flag置为true
			//达到一秒只能执行两次setTimeout	
			flag = true
		},500)		
	}
	flag = false;
	}
}
</script>