前端面试题:事件防抖,函数节流,事件防抖和函数节流的区别

一、事件防抖:

      1、本来事件的触发比较频繁,但是,我们只希望这无数次的事件触发中,有部分事件是有效的(如:用户有短暂的停止时才调用函数)。特别是在触发一次,就发一次请求,会有无数次的抖动。

如:  键盘事件:onkeydown,onkeyup,onkeypress,oninput,都是按一次键,触发一次.触发非常频繁。

     2、使用场景:

搜索框(百度搜索框,淘宝,京东等等),每次用户输入内容都需要发一次请求,从后端拿到关键字对应的内容.

特别是输入汉字时:

我们希望用户输入完成汉字时再触发(发送请求),

但是,实际情况是:当用户输入一个字母时,就会触发一次事件(发送一次请求)

记住:用户的输入习惯:当输入完一个汉字后,或者若干个汉字后,会有短暂的停顿。而在连续输入字母的过程中,不会有停顿。事件防抖的思路就是利用这个短暂停。

3、示例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<input type="text" id="querystr">
		<input type="submit" value="百度一下">
		<ul id="search-list">
			<li>运动鞋</li>
			<li>拖鞋</li>			
		</ul>
	</body>
</html>
<script type="text/javascript">


let myTimer = null;


$("querystr").oninput = function(){
	//在每次输入时,先清除上一次的定时器,清除了定时器后,就不会发送请求了。
	//即本次输入和上次输入的间隔非常短(小于100ms)时,上次定时器的代码就不会执行,也就不会发请求了。
	//如果本次输入和上次输入之间的时间间隔大于100ms时,上次输入的内容就会发送请求。
	if(myTimer!=null){
		window.clearTimeout(myTimer);
	}
	myTimer = setTimeout(()=>{		
		let scriptDom = document.createElement("script");
		scriptDom.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.value + '&json=1&p=3&sid=1438_24869_21080_18560_17001_25177_22160&req=2&bs=1%2B&pbs=1%2B&csor=2&pwd=1%3D&cb=f&_=1511334117083';
		document.body.appendChild(scriptDom);
		scriptDom.remove();
	},100);
}

function f(data){
	console.log(data);
	let htmlStr = "";
	data.s.forEach((item)=>{
		htmlStr+=`<li>${item}</li>`;
	});
	$("search-list").innerHTML = htmlStr;
}

function $(id){
	return document.getElementById(id);
}




	
</script>

 

二、函数节流:

1、节流的意思是,不要调用太频繁;如每隔200ms调用一次.

 

2、使用场景:

如:在页面无数次的滚动时(就会触发无数次的onscroll),但是我希望触发(调用函数)不要那么频繁.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
		</style>
	</head>
	<body style="height: 1000px;">
		
	</body>
</html>
<script type="text/javascript">
//函数节流:
//节流的意思是,不要调用太频繁;如每隔200ms调用一次.

//使用场景:
//如:在页面无数次的滚动时(就会触发无数次的onscroll),但是我希望触发(调用函数)不要那么频繁.


let i = 0;
let myTimer = null;

window.onscroll = function(){	
	//无数次的滚动过程中,
	//1、如果计时器还没有停(myTimer!=null),则不执行下面的代码(即:直接return)。
	//2、如果计时器停了(myTimer==null),说明一次执行完毕,则重新再启动定时器。
	if(myTimer!=null){
		return;
	}
	//启动定时器,时间间隔是200ms。
	myTimer = setTimeout(()=>{
		console.log(i++);
		myTimer =null;
	},200);
}

function $(id){
	return document.getElementById(id);
}
	
</script>

 

三、事件防抖和函数节流的区别:

 

1、函数节流:

节流的意思是:不要调用太频繁;如每隔200ms调用一次.

使用场景:

如:在页面无数次的滚动时(就会触发无数次的onscroll),但是我希望触发(调用函数)不要那么频繁.

 

2、事件防抖

防抖:在用户连续触发事件过程中,不能执行代码。

 

事件防抖的关键在:用户有停顿时,才执行代码(调用函数),没有停顿时,不执行代码;

函数节流的关键在于:用户停顿不停顿都会触发,无非触发的频率(调用函数)没有原始事件那么多而已.。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
		</style>
	</head>
	<body style="height: 1000px;">
		
	</body>
</html>
<script type="text/javascript">
// 一、事件防抖和函数节流的区别:
// 1、函数节流:

// 节流的意思是:不要调用太频繁;如每隔200ms调用一次.

// 使用场景:

// 如:在页面无数次的滚动时(就会触发无数次的onscroll),但是我希望触发(调用函数)不要那么频繁.

// 2、事件防抖

// 防抖:在用户连续触发事件过程中,不能执行代码。

//一 函数节流:
/*
let i = 0;
let myTimer = null;

window.onscroll = function(){	
	if(myTimer!=null){
		return;
	}
	myTimer = setTimeout(()=>{
		console.log(i++);
		myTimer =null;
	},1000);
}
*/


// 二 事件防抖

let i = 0;
let myTimer = null;

window.onscroll = function(){	
	if(myTimer!=null){
		window.clearTimeout(myTimer);
	}
	//重新启动定时器
	myTimer = setTimeout(()=>{
		console.log(i++);
		myTimer =null;
	},200);
	
}


function $(id){
	return document.getElementById(id);
}
	
</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值